12

我正在使用虚拟机，所以我无法复制代码......然后我将发布屏幕。我想问题是微不足道的，但我无法处理......请给我一些建议：

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

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

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

4

1 回答 1

32

说明性示例

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

<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

于 2013-06-26T18:35:48.027 回答