问答题13题:怎么实现单行、多行文本溢出隐藏?

难度:
更新时间:2022-06-25

参考答案:

  • 单行文本溢出
1overflow: hidden; // 溢出隐藏 2text-overflow: ellipsis; // 溢出用省略号显示 3white-space: nowrap; // 规定段落中的文本不进行换行
  • 多行文本溢出
1overflow: hidden; // 溢出隐藏 2text-overflow: ellipsis; // 溢出用省略号显示 3display:-webkit-box; // 作为弹性伸缩盒子模型显示。 4-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式:从上到下垂直排列 5-webkit-line-clamp:3; // 显示的行数

注意:由于上面的三个属性都是 CSS3 的属性,没有浏览器可以兼容,所以要在前面加一个-webkit- 来兼容一部分浏览器。

预览

小程序刷题更方便

预览

关注公众号获取最新面经

预览

加面试交流群

赞赏支持

预览

题库维护不易,您的支持就是我们最大的动力!