html table 列表折行并且高度有最小值

来源：互联网发布：相机照片数据恢复编辑：程序博客网时间：2024/04/27 22:04

网上大部分资料都是如http://www.itfeed.cn/post.asp?id=3337 所说,就是用word-warp: break-word; word-break: break-all;来控制折行,对与div、p等html元素是有效的，而且也支持FF；但对于表格table就支持的不好了，表格尽管设定了宽度，但还是会根据数据长度的不同而改变。

解决办法（红字、绿色字）：

css ：

.tableBorder1 {
   BORDER-RIGHT: #c6a188 1px solid;
    BORDER: #6b92af 1px solid;
    TABLE-LAYOUT: fixed;
}
.tableBorder1 th{
min-height:30px;
border:1px #6b92af solid;
background:#edf2f6;
font-size:13px;
}
.tableBorder1 td{
min-height:28px;
border:1px #dcdcdc solid;
overflow: hidden;
white-space: normal;
word-warp: break-word;
word-break: break-all;/*Only work in IE*/
text-overflow: ellipsis;/*Not working in FF*/
}
红色字属性解释：TABLE-LAYOUT: fixed;
Syntax
HTML{ table-layout : sLayout }Scriptingobject.style.tableLayout [= sLayout ]
Possible Values
sLayoutString that specifies or receives one of the following values:autoDefault. Column width is set by the widest unbreakable content in the column cells.fixedTable and column widths are set either by the sum of the widths on the col objects or, if these are not specified, by the width of the first row of cells. If no width is specified for the table, it renders by default with width=100%.
这个属性有个缺点，那就是在把列宽固定住的情况下把行高也给定死了，如果行字段少的话行高会很小，看着不舒服。
所以我们还要设置下td的最小高度min-height:28px 这样就行了。

绿色字属性部分可参看下面：

附：以下是http://www.itfeed.cn/post.asp?id=3337网页内容：

CSS文字折行与省略号

相关的几个属性和w3schools的参考如下：

word-warp 属性设置如何处理单词的折行
http://www.w3schools.com/css3/css3_pr_word-wrap.asp
word-wrap: normal | break-word

word-break 属性设置如何处理单词折断，仅支持IE
http://www.w3schools.com/css3/css3_pr_word-break.asp
word-break: normal | break-all | hyphenate

overflow 属性设置如何处理内容超出元素边框的情况
http://www.w3schools.com/css/pr_pos_overflow.asp
overflow: visible | hidden | scroll | auto | inherit

text-overflow 是一个比较特殊的属性，对于超出元素边框用省略号显示总的来说目前没有完美的css的solution，需要借助javascript的帮助

text-overflow: clip | ellipsis | ellipsis-word
clip : 　不显示省略标记（…），而是简单的裁切
ellipsis : 　当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个字符。
ellipsis-word : 　当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个词（word）。

Opera -o-text-overflow
Firefox3 不支持可以用-moz-bing解决这个问题 (https://developer.mozilla.org/En/CSS/-moz-binding)

<title>文字折行与省略号</title><style type="text/css">p.nowarp {      overflow: hidden;      white-space: nowrap;      text-overflow: ellipsis;/*Not working in FF*/}p.warp {      overflow: hidden;      white-space: normal;      word-warp: break-word;      word-break: break-all;/*Only work in IE*/      text-overflow: ellipsis;/*Not working in FF*/}</style></head><body><div style="width: 300px; border: 1px solid red;">      <p class="nowarp">      禁止换行，且用省略号表示超出的部分，哈哈哈哈哈哈哈哈啊哈哈啊哈哈      </p></div><div style="width: 300px; border: 1px solid red;">      <p class="warp">      自动换行，veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylong      </p></div></body>

IE和FF下的显示效果

而对于表格的解决办法