CSS text-overflow 属性

CSS text-overflow 属性确定如何向用户发出未显示的溢出内容信号。它可以被剪切,显示一个省略号或显示一个自定义字符串。


实例

使用 text-overflow 属性:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div.test
  6. {
  7. white-space:nowrap;
  8. width:12em;
  9. overflow:hidden;
  10. border:1px solid #000000;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <p>下面两个 div 包含无法在框中容纳的长文本。正如您所见,文本被修剪了。</p>
  16. <p>这个 div 使用 "text-overflow:ellipsis" :</p>
  17. <div class="test" style="text-overflow:ellipsis;">这是一些长文本,不能放在这个框中。</div>
  18. <p>这个 div 使用 "text-overflow:clip":</p>
  19. <div class="test" style="text-overflow:clip;">这是一些长文本,不能放在这个框中。</div>
  20. </body>
  21. </html>

页面底部有更多实例。


浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

带 -o- 的数字表示使用前缀的首个版本。

属性
text-overflow4.06.07.03.111.09.0 -o-

定义和用法

text-overflow 属性规定当文本溢出包含元素时发生的事情。

这个属性只对那些在块级元素溢出的内容有效,但是必须要与块级元素内联(inline)方向一致。

这个属性并不会强制“溢出”事件的发生,因此为了能让 text-overflow 能够生效,必须要在元素上添加几个额外的属性,比如”将overflow 设置为hidden”。
默认值:clip
继承性:no
版本:CSS3
JavaScript 语法:object.style.textOverflow="ellipsis"

语法

  1. text-overflow: clip|ellipsis|string;
描述测试
clip修剪文本。测试
ellipsis显示省略符号来代表被修剪的文本。测试
string使用给定的字符串来代表被修剪的文本。

相关页面

CSS3 教程:CSS3 文本效果

分类导航