您当前的位置:首页 > 网站建设笔记 >

使用CSS3的text-overflow属性控制文本溢出

0

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。

建站咨询

咨询热线

微信交流

返回顶部