单行文本显示省略号
p{
white-space: nowrap; /* 强转为单行*/
overflow: hidden;
text-overflow: ellipsis; /* 超出部分显示省略号 */
}
实现效果
多行文本显示省略号
webkit实现方式
p{
display: -webkit-box; /* 将对象作为弹性的伸缩盒子显示 */
-webkit-box-orient: vertical; /* 设置伸缩盒子对象内子对象的排列方式 */
-webkit-line-clamp: 2; /* 用该属性来限定块元素内文本显示的行数*/
overflow: hidden; /* 超出范围隐藏 */
text-overflow: ellipsis; /* 若没有省略号可加此属性 */
}
实现效果
通用实现方式
p{
height: 60px;
line-height: 2em; /* 设置行高 */
overflow: hidden; /* 超出部分隐藏 */
position: relative;
}
p::after{
content: "...";
position: absolute;
right: 0;
bottom: 0;
padding: 0 10px;
background: #fff; /* 使用背景颜色遮住内容*/
}
实现效果