html - CSS，文本溢出表格单元格

Question

我在虚拟机上工作，所以我不能复制代码……我会发布屏幕。我想问题是微不足道的，但我无法处理它......请给我一些建议:

表格代码: https://dl.dropboxusercontent.com/u/108321090/WWW1.png

网站的CSS代码和视线: https://dl.dropboxusercontent.com/u/108321090/WWW.png

所以一般来说，正如您在第二个链接上看到的那样，该行中有一个文本并且它不想换行，它一直作为 channel 运行并且超出了表格列边界。

Answer 1

示例

假设您有一个简单的两行表格，每行有两个单元格:

<table>
    <tr>
        <th>First</th>
        <th>Second</th>
    </tr>
    <tr>
        <td>Tiny text</td>
        <td>VeryLongNonBreakingLineOfTextThatNeedsToWrap</td>
    </tr>    
</table>

其中一个单元格有一个很长的单词，没有空格，没有连字符，所以它不会中断。

这是一些 CSS:

table {
    border: 1px solid lightgray;
}
table th {
    background-color: silver;
    text-align: center;
    padding: 10px;
}
table td {
    width: 200px;
    border: 1px dotted silver;
    word-break: break-all;
}

单元格的宽度固定为 200 像素。但是，由于长的不间断词，可能会发生两件事。

(1) 表格可能会增加列宽以容纳较长的文本。
(2) 文本可能会流出单元格，这取决于其他因素，例如使用具有指定表格宽度的固定布局。

如果您将 word-break: break-all 应用于表格单元格，文本将换行并且表格列将保持其预定义的宽度。

参见演示:http://jsfiddle.net/audetwebdesign/xtKLE/

引用

要了解有关 CSS3 分词属性的更多信息:http://www.w3.org/TR/css3-text/#word-break