CSS text-overflow 属性
CSS text-overflow 属性确定如何向用户发出未显示的溢出内容信号。它可以被剪切,显示一个省略号或显示一个自定义字符串。
实例
使用 text-overflow 属性:
<!DOCTYPE html>
<html>
<head>
<style>
div.test
{
white-space:nowrap;
width:12em;
overflow:hidden;
border:1px solid #000000;
}
</style>
</head>
<body>
<p>下面两个 div 包含无法在框中容纳的长文本。正如您所见,文本被修剪了。</p>
<p>这个 div 使用 "text-overflow:ellipsis" :</p>
<div class="test" style="text-overflow:ellipsis;">这是一些长文本,不能放在这个框中。</div>
<p>这个 div 使用 "text-overflow:clip":</p>
<div class="test" style="text-overflow:clip;">这是一些长文本,不能放在这个框中。</div>
</body>
</html>
页面底部有更多实例。
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
带 -o- 的数字表示使用前缀的首个版本。
属性 | |||||
---|---|---|---|---|---|
text-overflow | 4.0 | 6.0 | 7.0 | 3.1 | 11.09.0 -o- |
定义和用法
text-overflow
属性规定当文本溢出包含元素时发生的事情。
这个属性只对那些在块级元素溢出的内容有效,但是必须要与块级元素内联(inline)方向一致。
这个属性并不会强制“溢出”事件的发生,因此为了能让
text-overflow
能够生效,必须要在元素上添加几个额外的属性,比如”将overflow 设置为hidden”。默认值: | clip |
---|---|
继承性: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.textOverflow="ellipsis" |
语法
text-overflow: clip|ellipsis|string;
值 | 描述 | 测试 |
---|---|---|
clip | 修剪文本。 | 测试 |
ellipsis | 显示省略符号来代表被修剪的文本。 | 测试 |
string | 使用给定的字符串来代表被修剪的文本。 |
相关页面
CSS3 教程:CSS3 文本效果