Как настроить текст в таблице

Question

Как можно разбить длинный текст в таблице, чтобы настроить на td ширину?

Вот образец моей таблицы

Текст расширил текст, и я пытался настроить его с помощью CSS, но, похоже, ничего не помогло.

.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>

Если я запускаю этот код, где не применяется внешний стиль CSS, все получается хорошо.

Например, запустить его на локальном хосте, где нет внешних CSS-файлов:

Именно так я и хочу, чтобы это выглядело.

Answer 1

Вы можете использовать:

word-break: break-word;

Какая строка разрывается там, где текст в противном случае переполнил бы его поле содержимого.

Вы также можете посмотреть:

overflow-wrap: break-word;

, который вместо этого создаст разрыв, если целое слово не может быть помещено в собственную строку без переполнения.

Answer 2

Я смог решить ее, используя white-space: normal;