CSS文字折行与省略号

CSS文字折行与省略号

发表于2011/04/22

相关的几个属性和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下的显示效果