HTML表中的换行

我一直在使用word-wrap: break-word在div和span中对文本进行换行。然而，它似乎在表格单元格中不起作用。我有一个设置为width:100%的表，有一行和两列。列中的文本虽然使用了上面的换行样式，但不能自动换行。它会导致文本超出单元格的边界。这发生在Firefox，谷歌Chrome和Internet Explorer上。

下面是源代码的样子:

td { 边框:1px实体; L} <table style="width: 100%;"> < tr > < td > < span style=" font - family:宋体;"> Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong词 < / div > 道明> < / <span style=" font - family:宋体;">短字< / span > < / td > < / tr > 表> < /

上面的长单词比我的页面的边界大，但它没有与上面的HTML中断。我尝试了以下添加文本换行:抑制和文本换行:正常的建议，但都没用。

当前回答

下面是我在ie浏览器中使用的。注意添加了table-layout:fixed CSS属性

td { 边框:1px实体; ｝ <table style=" font - family:宋体;宽度:100%”> < tr > < span style=" font - family:宋体 LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord 道明> < / < / tr > 表> < /

2009-12-10 20:15:33

其他回答

风格= "表布局:固定;宽度:98%;自动换行:break-word”

<table bgcolor="white" id="dis" style="table-layout:fixed; width:98%; word-wrap:break-word" border="0" cellpadding="5" cellspacing="0" bordercolordark="white" bordercolorlight="white" >

演示- http://jsfiddle.net/Ne4BR/749/

这对我来说很有效。我有很长的链接，会导致在web浏览器上的表超过100%。在IE, Chrome, Android和Safari上测试。

2014-10-01 18:37:55

只要增加宽度。这对我很管用。

     <td style="width:10%;"><strong>Item Name</strong></td>

2020-08-18 09:06:21

看看这个演示

<table style="width: 100%;"> <tr> <td><div style="word-break:break-all;">LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord</div> </td> <td> <span style="display: inline;">Foo</span> </td> </tr> </table>

这里是阅读链接

2011-08-12 06:21:48

如果适合你，你可以试试……

把一个文本区域在你的td和禁用背景颜色为白色，并定义它的行数。

<table style="width: 100%;">
  <tr>
    <td>
        <textarea rows="4" style="background-color:white;border: none;" disabled>      Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </textarea>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

2020-01-29 06:21:19

这里常见的令人困惑的问题是我们有2个不同的css属性:换行和换行。最重要的是，换行有一个叫做break-word的选项。容易混淆:-)

通常这对我来说很管用，即使是在桌子里: 单词分割:break-word;

2020-09-07 05:25:45

HTML表中的换行

推荐文章

最新文章

标签