How to adjust text in a table

Question

How can I break the long text in a table to adjust to td width?

Here is a sample of my table

The text made it wider and I have been trying to adjust it with CSS but nothing seems to help.

.woocommerce-checkout-review-order > table {
    max-width: 400px;
    border-spacing: 10px 0px;
}

.woocommerce-checkout-review-order > table td:nth-child(1) {
  width: 15%;
}
.woocommerce-checkout-review-order > table td:nth-child(2) {
  width: 20%;
} 

.woocommerce-checkout-review-order > table th, td {
    text-align: left; 
    padding: 5px;
}

 <div id="order_info" class="woocommerce-checkout-review-order">
  <h3 id="order_review_heading">Your order</h3>
  <table class="shop_table woocommerce-checkout-review-order-table">
    <thead>
      <tr>
        <th class="product-name">Product</th>
        <th class="product-total">Total</th>
      </tr>
    </thead>
    <tbody>
      <tr class="cart_item">
        <td class="product-name">
          Women Ins super fire&nbsp;<strong class="product-quantity">&times; 1</strong>
        </td>
        <td class="product-total">
          <span class="woocommerce-Price-amount amount"><span
              class="woocommerce-Price-currencySymbol">&#36;</span>20.00</span>
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr class="cart-subtotal">
        <th>Subtotal</th>
        <td>
          <span class="woocommerce-Price-amount amount"><span
              class="woocommerce-Price-currencySymbol">&#36;</span>20.00</span>
        </td>
      </tr>
      <tr class="woocommerce-shipping-totals shipping">
        <th>Shipping</th>
        <td data-title="Shipping">
          There are no shipping options available. Please ensure that your address has been entered correctly, or
          contact us if you need any help.
        </td>
      </tr>
      <tr class="tax-total">
        <th>Tax</th>
        <td>
          <span class="woocommerce-Price-amount amount"><span
              class="woocommerce-Price-currencySymbol">&#36;</span>3.00</span>
        </td>
      </tr>
      <tr class="order-total">
        <th>Total</th>
        <td>
          <strong>
            <span class="woocommerce-Price-amount amount"><span
                class="woocommerce-Price-currencySymbol">&#36;</span>23.00</span>
          </strong>
        </td>
      </tr>
    </tfoot>
  </table>
</div>

If I run this code where no external CSS style is applied it comes out fine.

For instance, running it on localhost where there are no external CSS files:

This is exactly how I want it to appear.

Try the following **CSS** property: ```word-wrap: break-word;``` — Manu, Jun 18 '19 at 13:08
This question might be helpful to look at https://stackoverflow.com/questions/1258416/word-wrap-in-an-html-table — Dakota Maker, Jun 18 '19 at 13:09
Use the web developer console to inspect the element. Uncheck CSS assigned to it and then inspect the parent of the element and uncheck it's CSS. Keep doing this until the text starts wrapping. You will then know what CSS is causing the wrapping. I imagine it is either going to be a fixed width being applied or `word-wrap: nowrap;` being applied to one of the elements parents. — WizardCoder, Jun 18 '19 at 14:54

score 2 · Answer 1 · answered Jun 18 '19 at 13:13

2

You could use:

word-break: break-word;

Which line breaks wherever the text would otherwise overflow its content box.

You can also look at:

overflow-wrap: break-word;

Which instead will create a break if an entire word cannot be placed on its own line without overflowing.

answered Jun 18 '19 at 13:13

GibboK

71,848
143
435
658

do you mean you want to justify the content? try this one `text-align: justify;` applied on the text you want to align – GibboK Jun 18 '19 at 14:02
@OlajumokeAdemilade please let me know it does work so I can edit my answer thanks! – GibboK Jun 18 '19 at 14:02

score 0 · Answer 2 · answered Jun 18 '19 at 19:47

0

I was able to solve it using white-space: normal;

answered Jun 18 '19 at 19:47

Olajumoke Ademilade

191
1
14

How to adjust text in a table

2 Answers2