教你如何设置单行或多行文本超出省略号

单行文本超出出现省略号

首先给用于放文本的标签元素设置一个宽度值,并设置溢出属性overflow为溢出隐藏,设置文本缩略的样式为"..."
  overflow: hidden;				//先设置文本超出隐藏
  text-overflow:ellipsis;			//文本省略号
  white-space: nowrap;			//文本强制不换行


我们只需要添加这三个属性那我们的页面所需要出现省略的文本就可以实现了

多行文本超出隐藏

	word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;  //可以显示几行后出现省率号

	或者 ||
	
	word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box; 
	-webkit-box-orient: vertical;
  -webkit-line-clamp: 2;  //显示几行
 	overflow: hidden;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值