本溢出处理方案


  • 单行文本溢出

首先需要先设置元素的宽度,然后设置下面

overflow: hidden;
white-space: nowrap; // 设置文字不能换行
text-overflow: ellipsis; // 文本溢出时显示...
  • 多行文本溢出
webkit-line-clamp:2;(用来限制在一个块元素显示的文本的行数, 2 表示最多显示 2 行。 为了实现该效果,它需要组合其他的WebKit属性)
display:-webkit-box;(和 1 结合使用,将对象作为弹性伸缩盒子模型显示 )
-webkit-box-orient:vertical;(和 1 结合使用 ,设置或检索伸缩盒对象的子元素的排列方式 )
overflow:hidden;
text-overflow:ellipsis;

文章作者: zhangxinmei
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 zhangxinmei !
 上一篇
JavaScript 中的可选链运算符 JavaScript 中的可选链运算符
在 ES2020 之前,如果要访问 JavaScript 中对象的嵌套属性,则必须在每个级别检查是否为 null 或 undefined,否则最终将会抛出 TypeError。 为了避免出现 TypeError,我们将不得不创建临时变量或执
2020-05-29 zhangxinmei
下一篇 
块格式化上下文(BFC) 块格式化上下文(BFC)
官方MDN的解释:块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。 通俗的理解BFC通俗一点来说就是一
2020-05-06 zhangxinmei
  目录