咨询热线
137 1731 25507×24小时服务热线
微信交流
终于等到你，还好我没放弃text-overflow属性是当文本溢出它的容器盒时文本的显示（还必须定义容器盒overflow:hidden），看如下例子，我在<p>元素上引用该属性：
div.example {
width: 200px;
height: 85px;
margin-bottom: 20px;
padding: 5px 10px;
overflow: hidden;
border:1px solid #ccc;
background-color: #eee;
}
div.example p {
width: 200px;
height: 85px;
overflow: hidden;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
你可以看到，我故意在这个例子里引入一段很长的话，这样它就会溢出200px宽的<div>盒子。当设置text-overflow:ellipsis，文本溢出时显示更美观的省略号代替不美观的裁切行为。结果如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0,width=device-width">
<title>使用CSS3的text-overflow属性控制文本溢出</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<style type="text/css">
div.example {
width: 200px;
height: 85px;
margin-bottom: 20px;
padding: 5px 10px;
overflow: hidden;
border:1px solid #ccc;
background-color: #eee;
}
div.example p {
width: 200px;
height: 85px;
overflow: hidden;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
</style>
<div class="example">
<p>text-overflow属性规定当文本溢出包含元素时发生的事情。默认值为clip。值为clip时修剪文本。值为ellipsis时，显示省略符号来代表被修剪的文本。值为string时，使用给定的字符串来代表被修剪的文本。</p>
</div>
</body>
</html>
text-overflow属性规定当文本溢出包含元素时发生的事情。默认值为clip。值为clip时修剪文本。值为ellipsis时，显示省略符号来代表被修剪的文本。值为string时，使用给定的字符串来代表被修剪的文本。
text-overflow:ellipsis对你的工具包来说不是一项至关紧要的新补充。不过如果你想让潜在的文本溢出时看起来少一点不美观，它是一项有益的补充。主流的现代浏览器都支持text-overflow:ellipsis。