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


当前回答

我已经尽力了,但对我来说就是这样

white-space: pre-wrap;
word-wrap: break-word;

其他回答

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

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

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

这对我来说很管用:

<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>

默认情况下,表格自动换行,所以确保显示的表格单元格为table-cell:

td {
   display: table-cell;
}

如果你不需要表格边框,应用这个:

table{
    table-layout:fixed;
    border-collapse:collapse;
}
td{
    word-wrap: break-word;
}