CSS3 text-overflow 属性

时间：6年前阅读：4851

text-overflow是CSS3的一个属性，其作用是当文本溢出包含它的元素时，应该裁剪还是将多余的字符用省略号来表示。

该属性一般和overflow:hidden属性一起使用。

text-overflow: clip|ellipsis|string

语法 text-overflow: clip|ellipsis|string;

clip 修剪文本

ellipsis 使用省略号来代表修剪的文本

string 使用给定的字符串来代表被修剪的文本

white-space:nowrap; //段落中文字不换行

text-overflow: ellipsis; // 多出的内容省略号...

overflow:hidden; //是让多出的内容隐藏起来

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.dd{
				width: 150px;
				height: 30px;			
				border: 1px solid darkcyan;
			}
			.dd p{
				font-size: 15px;
				margin: 0 auto;
				white-space:nowrap;    /*强制不换行*/
				text-overflow:ellipsis;  /*多出的内容省略号...*/
				overflow:hidden;      /*多出的内容隐藏起来*/
			}
		</style>
	</head>
	<body>
	<div class="dd">
		<p>当文本溢出时，用省略号代替溢出的文本</p>
	</div>      
	</body>
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

CSS3 text-overflow 属性

网友评论