html - 如何为表格单元格设置最大宽度？

Question

看这段代码:

#test {
  width: 20%;
  word-break: break-all;
}

<table>
  <tr>
    <td id="test">
      <ul>
        <li>HiByeHiByeHiByeHiByeHiByeHiByeHiByeHiByeHiByeHiByeHiByeHiBye</li>
      </ul>
</td>
      <td>
        Box 2: Where is its 80% width?
      </td>
  </tr>
</table>

如何为 #test 设置 20% 的最大宽度，其中包含超长字符串未损坏？如果我为第二个 td 设置宽度，它将不起作用!

===

问题解决:

一行 word-break: break-all 就可以了。感谢您的帮助!

Answer 1

使用 CSS 属性 word-wrap 和 word-break 如下所示:

#test {
  width: 20%; 
  word-break: break-all;
  word-wrap: break-word;
}

<table>
  <tr>
    <td id="test">
      <ul>
        <li>HiByeHiByeHiByeHiByeHiByeHiByeHiByeHiByeHiByeHiByeHiByeHiBye</li>
      </ul>
</td>
      <td>
        Box 2: Where is its 80% width?
      </td>
  </tr>
</table>