Question

我有以下HTML代码：

<div class="container">
  <table class="table">
    <tbody class="tBody">
      <tr>
        <td>Hellooooooooooooooooooooooooooooooooooooooooooooo</td>
        <td>World</td>
      </tr>
    </tbody>
  </table>
</div>

CSS：

.container {width: 100%;}
.table {display:block;}
.tBody {max-width: inherit;}

我的问题是总宽度是由拖动条定义的，所以所有元素的宽度都必须是动态的。我希望<td>元素中的文本能够动态包装自己。到目前为止，<div>的宽度会根据拖动条的位置更改其值。为了使其具有<div>的宽度，我将<table> CSS设置为display:block。表格中的其余元素<tbody>，<tr>，<td>将其宽度设置为表格中最宽的元素，在本例中为文本＆＃39; Hellooooooooooooooooooooooooooooooooooooooooo＆＃39 ;.所以现在，如果我移动拖动条以试图使表格更小，div将改变其宽度，但表格元素＆＃39;宽度将保持不变。文本不会包装。

如何通过拖动条设置表（及其子项）的宽度？

Answer 1

只需将此行添加到CSS中：

td {word-wrap: break-word; word-break: break-all;}

演示：

＆＃13;

.container {width: 100%;}
.table {display:block;}
.tBody {max-width: inherit;}
td {word-wrap: break-word; word-break: break-all;}

＆＃13;

<div class="container">
  <table class="table">
    <tbody class="tBody">
      <tr>
        <td>Hellooooooooooooooooooooooooooooooooooooooooooooo</td>
        <td>World</td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

另见this Fiddle。

Answer 2

word-wrap: break-word;

试试这个

Answer 3

您可以使用word-wrap和word-break属性，例如：

.table {
  display:block;
  word-wrap:break-word;
  word-break: break-all;     
}

CSS：宽度宽于宽度。文字没有包装

3 个答案: