CSS实战与技巧——8 .文本溢出显示省略号(overflow: hidden; white-space: nowrap; text-overflow: ellips)

当文本溢出盒子的时候显示的是省略号

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
		<style type="text/css">
			p{
				width: 202px;height: 32px;border: 1px solid #000;
				line-height: 30px;
				margin: 100px auto;/*向下100px,左右居中*/
				}
		</style>
	</head>
	<body>
		
		<p>我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习</p>
		
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
		<style type="text/css">
			p{
				width: 202px;height: 32px;border: 1px solid #000;
				line-height: 30px;
				margin: 100px auto;/*向下100px,左右居中*/
				/*溢出隐藏*/
				overflow: hidden;
				/*文字变成一行显示*/
				white-space: nowrap;
				/*溢出时显示省略号*/
				text-overflow: ellipsis;/*文本溢出时发生什么事,ellipsis省略号*/
			}
		</style>
	</head>
	<body>
		
		<p>我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习</p>
		
	</body>
</html>

添加text-overflow: ellipsis;属性,文本溢出时发生什么事,ellipsis省略号。但光添加这一个属性还无法实现多行文本溢出时省略号代替,还需要将多行文本排成一行显示,这时用到white-space: nowrap;属性同时还需要溢出隐藏属性配合使用overflow: hidden;属性

若是只是单行文本实现单行文本溢出时省略号代替则加这一个属性足够了。text-overflow: ellipsis;属性,
在这里插入图片描述
多行文本需要这三个属性才能完成这一个效果
overflow: hidden;溢出隐藏
white-space: nowrap;文字变成一行显示
text-overflow: ellipsis; 文本溢出时发生什么事,ellipsis省略号

在这里插入图片描述
如果要用其他图案作为省略号则修改 text-overflow: ellipsis;中的ellipsis属性值就可以了,ellipsis本身就是圆点省略号的意思

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值