防止重叠表td宽度的文本

Question

<td>当条目太长时,如何限制表条目在整个屏幕上展开？

Answer 1

嗯,有max-width,max-height和overflow在CSS.

所以

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会在需要的时候打破单词,即使它不在一个单词的最后.如果您不希望表格完全展开或缩小,您也可以使用height和width指定固定大小.

Answer 2

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

Answer 3

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

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