css实现文本超出显示…

时间:2022-06-08
本文章向大家介绍css实现文本超出显示…，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

文本超出为省略号在很多位置都会用到，作为一个基本样式或者说原子类样式，我们需要知道其实现原理为什么。

使用场景

文字内容过多，超出盒子模型的内容显示为省略号。提示：无论是单行还是多行文本，都需要设置高度，行高，超出不可见。（仅供参考）

文本单行省略

.demo{
white-space:nowrap;（超出不换行，默认为换行的）
text-overflow:ellipsis;（省略号样式）
//代码部分 完整部分
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
}

文本多行省略 (-webkit-)

white-space:normal;（超出宽度换行）
text-overflow: ellipsis; （省略号样式）
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;（行数）
display: -webkit-box;（展示盒子模型类型）
//代码部分(供拷贝)
overflow:hidden;
white-space:normal;
text-overflow: ellipsis; 
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
display: -webkit-box;

其他方案

  • 引入jq插件，待补充

随机文章
WEB前端知识点必读
最近更新