单行文本溢出
字数过多超过盒子时,以"…"形式显示
p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; /* 不换行 设置如何处理元素内的空白*/
}
-
text-overflow 规定当文本溢出包含元素时发生的事情:
- 值为clip 表示修剪文本
- 值为ellipsis 表示以省略号显示
- 值为" " 表示以指定的字符串显示
多行文本溢出
适用于webkit浏览器及移动端
div {
display: -webkit-box; /* 讲对象作为弹性伸缩盒子模型展示 */
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 控制行数 */
overflow: hidden;
}
/* 设置首行缩进css text-indent: 2em; */