文字换行超过高度用省略号结尾

  1. 假如是展示一行,超出部分显示成省略号,则
p {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
  1. 假如是要求文字显示成2行,超出部分用省略号结尾,则
p {
 	display: -webkit-box;   /* 将对象作为弹性伸缩盒子模型显示 */
    -webkit-box-orient: vertical;   /* 设置或检索伸缩盒对象的子元素的排列方式 */
    -webkit-line-clamp: 2;  /* 指定几行 */
    overflow: hidden;  
}

效果图:
在这里插入图片描述
不足之处:火狐浏览器不支持line-clapm属性,因此在火狐里没有效果

猜你喜欢

转载自blog.csdn.net/qq_43437571/article/details/104842767