测试4
测试大礼包
爬虫实战特训课

CSS3 text-overflow 属性

 

实例

使用text-overflow属性：

 
div.test
{
text-overflow:ellipsis;
}

在此页底部有更多的例子。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性          
text-overflow 4.0 6.0 7.0 3.1 11.0
9.0 -o-

属性定义及使用说明

text-overflow属性指定当文本溢出包含它的元素，应该发生什么。

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

语法

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

更多实例

悬停显示整个文本

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>学编程(www.xuebiancheng.cn)</title>
<style> 
div.test
{
	white-space:nowrap; 
	width:12em; 
	overflow:hidden; 
	border:1px solid #000000;
}

div.test:hover
{
	text-overflow:inherit;
	overflow:visible;
}
</style>
</head>
<body>

<p>鼠标移动到框内，查看效果t.</p>

<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
<br>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>

</body>
</html>

这个例子演示了当鼠标悬停在该元素，如何显示整个文本。