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中断。我尝试了以下添加文本换行:抑制和文本换行:正常的建议，但都没用。

当前回答

<p style="overflow:hidden; width:200px; word-wrap:break-word;">longtexthere<p>

2011-06-01 09:44:04

其他回答

下面是我在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

在我的例子中，我必须同时使用换行和空白预换行来达到最佳效果。希望它能帮助到更多人。

<td class="wrap-longtext">
   long,longlonglonglonglonglonglong..................
</td>

<style>    
  .wrap-longtext
  {
    word-break: break-all;/* Use break-word, if you prefer sensible text than short width of the cell */
    white-space: pre-wrap;
  }
</style>

2022-12-21 22:17:15

事实证明，这并没有什么好办法。我最接近的做法是在表格周围的div中添加“overflow:hidden;”，从而丢失文本。真正的解决办法似乎是抛弃餐桌。使用divs和相对定位，我能够实现相同的效果，减去<table>的遗留

2015更新:这是为那些像我一样想要这个答案的人准备的。经过6年的努力，感谢所有贡献者。

* { /* this works for all but td */
  word-wrap:break-word;
}

table { /* this somehow makes it work for td */
  table-layout:fixed;
  width:100%;
}

2009-08-12 00:08:35

这对我来说很管用:

<style type="text/css">
    td {

        /* CSS 3 */
        white-space: -o-pre-wrap;
        word-wrap: break-word;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
    }

表属性为:

   table {
      table-layout: fixed;
      width: 100%
   }

</style>

2014-05-20 13:22:39

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

把一个文本区域在你的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

HTML表中的换行

推荐文章

最新文章

标签