Html 防止文本重叠表格宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4636269/
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
Prevent text from overlap table td width
提问by daniel
How can I restrict the table <td>entry to expanding over the entire screen when
the entry is too long?
<td>当条目太长时，如何限制表格条目在整个屏幕上展开？
回答by Phoenix
Well, there's max-width, max-height, and overflowin CSS.
嗯，有max-width，max-height和overflow在CSS。
So
所以
td.whatever
{
max-width: 150px;
max-height: 150px;
overflow: hidden;
}
would restrict the maximum width and height to 150px, and it can be anything from less than 150 up to 150, and anything that doesn't fit inside that will be clipped off and hidden from view.
将最大宽度和高度限制为 150 像素，它可以是从小于 150 到 150 的任何值，并且任何不适合内部的东西都将被剪掉并隐藏起来。
Overflow's default (overflow: visible;) is to simply allow anything that won't fit inside its specified container to just spill over outside of it. If you only want to limit it horizontally and don't want to hide anything, word-wrapmay help:
溢出的默认值 ( overflow: visible;) 是简单地允许任何不适合其指定容器的东西溢出到它的外面。如果您只想水平限制它并且不想隐藏任何东西，word-wrap可能会有所帮助：
td.whatever
{
max-width: 150px;
word-wrap: break-word;
}
word-wrapwill break words whenever it needs to, even if it's not at the end of a word. You can also just use heightand widthto specify a fixed size if you don't want the table to expand or shrink at all.
word-wrap会在需要时中断单词，即使它不在单词末尾。如果您根本不希望表格扩大或缩小，您也可以仅使用height和width指定固定大小。
回答by Floern
You could use word-wrap:break-word;, so overlong words get wrapped.
你可以使用word-wrap:break-word;，这样过长的单词就会被包裹起来。
回答by lavelle
td.whatever_class{
max-width: 100px;
}
replace 100px with however wide you want. 1000px is a good width for websites as it will fit on nearly all monitors people have today, so if you had 20 columns then make it 50px for example.
用你想要的宽度替换 100px。1000px 对网站来说是一个很好的宽度，因为它几乎适合人们今天拥有的所有显示器，因此，如果您有 20 列，那么例如将其设为 50px。
回答by Dairy Window
You need to specify BOTH the max-widthand displaystyles (because the display attribute is set funny because it's a td, not a normal element) e.g.
您需要同时指定max-width和display样式（因为 display 属性设置为有趣，因为它是 td，而不是普通元素）例如
td{
max-width: 100px;
display: inline-block;
}
回答by Experimenter
There is also nice solution with property max-width: 0px; so it will be responsible to full width of table.
还有一个很好的解决方案，属性 max-width: 0px; 所以它将负责表格的全宽。
