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文件的localhost上运行它：

这正是我希望它出现的方式。

Answer 1

您可以使用：

word-break: break-word;

在文本可能超出其内容框的位置处换行。

您还可以查看：

overflow-wrap: break-word;

如果整个单词不能在不溢出的情况下放在自己的行上，则会产生中断。

Answer 2

我能够使用white-space: normal;

解决它

如何调整表格中的文本

2 个答案: