html table 列表折行并且高度有最小值
2011-08-10 17:02
302 查看
网上大部分资料都是如http://www.itfeed.cn/post.asp?id=3337 所说,就是用word-warp: break-word; word-break: break-all;来控制折行,对与div、p等html元素是有效的,而且也支持FF;但对于表格table就支持的不好了,表格尽管设定了宽度,但还是会根据数据长度的不同而改变。
.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
Possible Values
这个属性有个缺点,那就是在把列宽固定住的情况下把行高也给定死了,如果行字段少的话行高会很小,看着不舒服。
所以我们还要设置下td的最小高度min-height:28px 这样就行了。
绿色字属性部分可参看下面:
附:以下是http://www.itfeed.cn/post.asp?id=3337网页内容:
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)
IE和FF下的显示效果
而对于表格的解决办法
解决办法(红字、绿色字):
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 ] |
sLayout | String that specifies or receives one of the following values:
|
所以我们还要设置下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下的显示效果
而对于表格的解决办法
相关文章推荐
- 如何控制HTML的下拉列表框的下拉列表高度
- php写的 html table generator. 可以自动生成列表.很好用的
- UIWebView中加载HTML的Table,td设置百分比宽度并且宽度不被里面的内容撑开
- 关于html中table表格tr,td的高度和宽度
- html中table插入空行,一定要设置高度。
- HTML学习笔记——列表和table
- HTML 保持Table固定高度,內空不換行設置方法
- HTML Table 列表滚动
- 复制表,仅当使用了列的列表,并且 IDENTITY_INSERT 为 ON 时,才能在表 'TableName' 中为标识列指定显式值。
- 设置html的table高度100%
- HTML Table保持固定高度
- 复制表,仅当使用了列的列表,并且 IDENTITY_INSERT 为 ON 时,才能在表 'TableName' 中为标识列指定显式值。 .
- 改变navigationbar 高度, 并且让tableview的cell 不被覆盖
- (转贴)仅当使用了列的列表,并且 IDENTITY_INSERT 为 ON 时,才能在表 'TableName' 中为标识列指定显式值。
- QT使用tableWidget显示双排列表 并且选中用红框圈出来
- html基础 table表格的边框线 单元格的宽度 高度
- 关于html中table表格tr,td的高度和宽度
- html 关于一行两列 高度不定的实现(不用table)
- HTML:将body按px分成上下两部分而不产生滚轴,并且两部分高度的和等于body的高度。
- html基础 table表格的边框线 单元格的宽度 高度