[css3] text-overflow 属性

text-overflow 属性

原文链接：CSS3 text-overflow 属性

实例

div.test {
	text-overflow: ellipsis
}

在 CodePen 中打开实例

浏览器支持

IE	Firefox	Chrome	Safari	Opera
支持	支持	支持	支持	支持

定义和用法

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

默认值： clip
继承性： no
版本： CSS3
JavaScript 语法： object.style.textOverflow=“ellipsis”

语法

text-overflow: clip | ellipsis | string;

值	描述	测试
clip	修剪文本	测试
ellipsis	显示省略符号来代表被修剪的文本。	测试
string	使用给定的字符串来代表被修剪的文本。

亲自试一试 - 实例

带有 hover 效果的 Text-overflow

<style type="text/css">
div.test {
  width: 12em;
  border: 1px solid #000;
  white-space: nowrap;
  overflow: hidden;
}

div.test:hover {
  overflow: visible;
  test-overflow: inherit;
}

.ellipsis {
  text-overflow: ellipsis
}

.clip {
  text-overflow: clip;
}
</style>
<p>下面两个 div 包含无法在框中容纳的长文本。正如您所见，文本被修剪了。</p>
<p> 这个 div 使用 "text-overflow: ellipsis"</p>
<div class="test ellipsis">This is some long text that will not fit in the box</div>
<p> 这个 div 使用 "text-overflow: clip"</p>
<div class="test clip">This is some long text that will not fit in the box</div>

在 CodePen 中打开示例