- 首页 > it技术 > >
CSS样式——单行溢出省略号显示与多行溢出省略号显示
- 了解空白空间的处理
while-space:nowrap;
1. 文本不换行并保留回车和空格：pre
2. 文本换行并保留回车和空格：pre-wrap
3. 文本换行并只保留回车：pre-line
4. 文本不换行但不保留回车和空格：nowrap
- 了解溢出内容部分处理
overflow:hidden1. 溢出不隐藏：visible
2. 溢出隐藏：hidden
3. 显示滚动条：scroll
4. 自动显示滚动条：auto
- 设置单行文本溢出省略号显示
div{
width:100px;
// 添加宽度
while-space:nowrap;
// 设置内容单行显示
overflow:hidden;
// 设置溢出内容隐藏
text-overflow:ellipsis;
// 添加省略号
}
- 设置多行文本溢出省略号显示
div{
width: 100px;
// 添加宽度
display: -webkit-box;
// 对象作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical;
// 设置或检索伸缩盒对象的子元素的排列方式
-webkit-line-clamp: 3;
// 限制显示行数
overflow: hidden;
// 设置溢出内容隐藏
}注意：需要对不同浏览器进行兼容处理
推荐阅读
