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)
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<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=" 300px; border: 1px solid red;"> <p class="nowarp"> 禁止换行，且用省略号表示超出的部分，哈哈哈哈哈哈哈哈啊哈哈啊哈哈 </p></div><div style=" 300px; border: 1px solid red;"> <p class="warp"> 自动换行，veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylong </p></div></body> |
IE和FF下的显示效果
