最近做项目用到了这个知识点,所以纪录一下
实现单行文本溢出方法
也就三行代码
overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;
overflow: hidden 溢出隐藏
white-space属性是用来设置如何处理元素中的 空白,设置了nowrap之后文本不会换行。
我之前写过一篇关于 标签 pre和css的white-space属性 的博客。标签 pre和css的white-space属性
text-overflow 用来控制超长溢出的文字内容的显示方式,超出的文字可以是直接截断、用省略号表示,或用自定义的字符替代。(在你设置自定义字符串的时候,如果空间太小到连省略号都容纳不下,那么这个字符串也会被截断)
效果如下
记得不要用行级元素
实现多行文本溢出方法
<div>
我想吃麻辣烫!我想吃麻辣烫!
我想吃麻辣烫!我想吃麻辣烫!
我想吃麻辣烫!我想吃麻辣烫!
我想吃麻辣烫!我想吃麻辣烫!
</div>
div {
width: 80px;
height: 80px;
border: 1px solid red;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
}
效果图如下:
这种方法使用了webkit的拓展属性,所以适用于webkit浏览器及移动端
display: -webkit-box; 将对象作为弹性伸缩盒子模型显示
-webkit-line-clamp: 后面设置的数字就是你准备在多少行显示省略号
-webkit-box-orient用来设置一个元素是水平还是垂直布局其内容。
-webkit-box-orient: vertical; 盒子垂直布局其内容。
-webkit-box-orient是不标准的,请尽量不要在生产环境中使用它
(如果这篇文章有什么问题请及时联系我!)