CSS文字折行与省略号

最新推荐文章于 2025-04-25 16:27:26 发布

转载最新推荐文章于 2025-04-25 16:27:26 发布 · 141 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dirts/archive/2012/11/13/2768159.html

文章标签：

#javascript #ViewUI

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