Question

我想要一个在必要时使用所有屏幕的表，但如果它们太长则会破坏单词。

我试过了：

<table width=100%>
    <tr><td class=breaklines>   AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA     
    </td></tr>
</table>

.breaklines
{
      word-wrap: break-word;
}

它不起作用，表格单元格中的单词永远不会被破坏。

那么如何打破表格单元格中的单词？

小提琴：

https://jsfiddle.net/9u0pj3hn/

Answer 1

这是一个适用于表格单元格的有趣技巧，它也适用于文本溢出。它包括这样的最大宽度：

看到它正常工作：https://jsfiddle.net/9u0pj3hn/1/

.breaklines
{
    word-wrap: break-word;
    max-width:0;
}

Answer 2

您好您也可以使用此解决方案。

table{
    width: 100%; 
    word-wrap:break-word;
    table-layout: fixed;
}

<table width=100%>
    <tr><td class=breaklines>   AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA     
    </td></tr>
</table>

Answer 3

您需要将table-layout更改为fixed。

http://www.w3schools.com/cssref/pr_tab_table-layout.asp

＆＃13;

table.breaklines
{
    width: 100%;
    table-layout:fixed;
}

.breaklines
{
    word-wrap: break-word;
}

＆＃13;

<table class="breaklines">
    <tr><td class="breaklines">   AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA     
    </td></tr>
</table>

＆＃13;

Answer 4

使用break-all可以获得相同的结果。因此，如果你写代码

<td style="word-break:break-all;">AAAAAAAAAAAAAAAAAAAA</td>

或

<span style="word-break:break-all;">AAAAAAAAAAAAAAAAAAAAA</span>

然后它会起作用。看到它有效：http://jsfiddle.net/johannesMt/9kmmqphx/

Answer 5

你需要设置<td>的宽度，让HTML知道在哪里打破这个词。例如：

<td style="width:50px;">AAAAAA</td>

在表格单元格中自动换行

5 个答案: