html - HTML 表格中的自动换行

我一直在使用 word-wrap:break-worddivspan 中换行。但是,它似乎不适用于表格单元格。我有一个设置为 width:100% 的表格,有一行和两列。列中的文本虽然采用上述 word-wrap 的样式,但不会换行。它会导致文本超出单元格的边界。这发生在 Firefox、Google Chrome 和 Internet Explorer 上。

源代码如下:

td {
  border: 1px solid;
}
<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-wrap: break-word;">
        Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

上面的长字大于我的页面的边界,但它不会与上面的 HTML 中断。我尝试了以下添加 text-wrap:suppresstext-wrap:normal 的建议,但都没有帮助。

最佳答案

以下内容适用于 Internet Explorer。注意添加 table-layout:fixed CSS 属性

td {
  border: 1px solid;
}
<table style="table-layout: fixed; width: 100%">
  <tr>
    <td style="word-wrap: break-word">
      LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
    </td>
  </tr>
</table>

https://stackoverflow.com/questions/1258416/

相关文章:

html - 如何禁用 <textarea> 的调整大小抓取器?

javascript - HTML5 本地存储与 session 存储

html - 在另一个 div 中垂直居中一个 div

html - 如何为网站添加浏览器标签图标(favicon)?

html - 展开一个 div 以填充剩余的宽度

html - HTML div 和 span 元素有什么区别?

html - 使用 CSS 使 div 可垂直滚动

javascript - 向 div 添加工具提示

HTML 输入 - 名称与 id

javascript - jQuery/JavaScript 替换损坏的图像