网上大部分资料都是如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 } Scripting object.style.tableLayout [ = sLayout ] Possible Values
这个属性有个缺点,那就是在把列宽固定住的情况下把行高也给定死了,如果行字段少的话行高会很小,看着不舒服。
sLayout String that specifies or receives one of the following values:
auto Default. Column width is set by the widest unbreakable content in the column cells. fixed Table 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的参考如下:
white-space 属性设置如何处理元素内的空白。
http://www.w3schools.com/css/pr_text_white-space.asp
white-space: normal | nowarp | pre | pre-line | pre-warp | inherit
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下的显示效果
而对于表格的解决办法