css实例
持续更新…
文本溢出
文本溢出主要考虑几个方面: 换行(white-space)、超出显示(overflow,text-overflow)、多行文本需兼容
1、单行文本溢出
width: 100px; (宽度非必须,响应式)
word-break: break-all; (连续英文情况下需该属性)
white-space: nowrap; (不换行)
overflow: hidden;
text-overflow: ellipsis;
2、多行文本溢出
width: 100px; (宽度非必须,响应式)
display: -webkit-box; (必须,定义对象为弹性伸缩盒子模型)
-webkit-line-clamp: 3; (行数)
-webkit-box-orient: vertical;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
实现文本溢出还可以通过js、伪元素等方法实现,感兴趣的可参考以下文章:
https://juejin.cn/post/6844903988081475591