防止重叠表td宽度的文本

时间:2011-01-08 21:32:11

标签: html css html-table width

如何限制表<td>条目以扩展整个屏幕 条目太长了?

5 个答案:

答案 0 :(得分:51)

好吧,CSS中有max-widthmax-heightoverflow

所以

td.whatever
{
    max-width: 150px;
    max-height: 150px;
    overflow: hidden;
}

会将最大宽度和高度限制为150px,并且它可以是从小于150到150的任何内容,任何不适合内部的东西都会被剪掉并隐藏在视图之外。

溢出的默认值(overflow: visible;)只是允许任何不适合其指定容器内的东西溢出它。如果您只想横向限制它并且不想隐藏任何内容,word-wrap可能有所帮助:

td.whatever
{
    max-width: 150px;
    word-wrap: break-word;
}

word-wrap会在需要时断言,即使它不在单词的末尾。如果您不希望表扩展或缩小,也可以使用heightwidth指定固定大小。

答案 1 :(得分:17)

你可以使用word-wrap:break-word;,所以过长的单词会被包裹。

答案 2 :(得分:6)

td.whatever_class{
    max-width: 100px;
}

用你想要的宽度替换100px。 1000px对于网站来说是一个很好的宽度,因为它适用于人们现在拥有的几乎所有显示器,所以如果你有20列,那么例如50px。

答案 3 :(得分:2)

您需要同时指定max-widthdisplay样式(因为显示属性设置为有趣,因为它是td,而不是普通元素),例如。

td{
    max-width: 100px;
    display: inline-block;
}

答案 4 :(得分:1)

还有一个很好的解决方案,属性max-width:0px;所以它将负责表的全宽。