Html CSS，文本溢出表格单元格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17325746/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS, Text overflows out of table cell
提问by F1sher
I am working on Virtual Machine so I can't copy code... I will post the screens then. Problem is trivial I guess but I can't deal with it... please give me some suggestions:
我正在使用虚拟机，所以我无法复制代码......然后我会发布屏幕。我想问题是微不足道的，但我无法处理……请给我一些建议：
Table code: https://dl.dropboxusercontent.com/u/108321090/WWW1.png
表格代码：https: //dl.dropboxusercontent.com/u/108321090/WWW1.png
CSS code and sight of website: https://dl.dropboxusercontent.com/u/108321090/WWW.png
CSS 代码和网站视图：https: //dl.dropboxusercontent.com/u/108321090/WWW.png
So in general as you can see on the 2nd link, there is a text in the row and it doesn't want ot wrap, it's going as lane all the time and goes out of table column border.
所以一般来说，正如您在第二个链接上看到的那样，行中有一个文本，它不想换行，它一直作为车道并超出表格列边框。
回答by Marc Audet
Illustrative Example
示例
Suppose that you have a simple two-row table with two cells per row:
假设您有一个简单的两行表格，每行有两个单元格：
<table>
<tr>
<th>First</th>
<th>Second</th>
</tr>
<tr>
<td>Tiny text</td>
<td>VeryLongNonBreakingLineOfTextThatNeedsToWrap</td>
</tr>
</table>
One of the cells has a very long word with no spaces, no hyphens so it will not break.
其中一个单元格有一个很长的单词，没有空格，没有连字符，所以它不会中断。
Here is some CSS:
这是一些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;
}
The cells have a fixed width of 200px. However, because of the long non-breaking word, two things can happen.
单元格的宽度固定为 200 像素。然而，由于长的不间断的词，可能会发生两件事。
(1) The table may increase the column width to accommodate the long text.
(2) The text may flow out of a cell depending on other factors such as using a fixed layout with a specified table width.
(1) 表格可能会增加列宽以容纳长文本。
(2) 文本可能会流出单元格，这取决于其他因素，例如使用具有指定表格宽度的固定布局。
If you apply word-break: break-allto the table cells, the text will wrap and the table columns will retain their predefined widths.
如果应用word-break: break-all到表格单元格，文本将换行，表格列将保留其预定义的宽度。
See demo at: http://jsfiddle.net/audetwebdesign/xtKLE/
见演示：http: //jsfiddle.net/audetwebdesign/xtKLE/
Reference
参考
To learn more about the CSS3 word-break property: http://www.w3.org/TR/css3-text/#word-break
要了解有关 CSS3 断字属性的更多信息：http: //www.w3.org/TR/css3-text/#word-break
