CSS文字折行与省略号

发表于2011/04/22

相关的几个属性和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>