首页 > 代码库 > CSS文字折行与省略号

CSS文字折行与省略号

2024-07-23 21:19:19   213人阅读

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)

帮助
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="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下的显示效果

CSS文字折行与省略号


联系
我们