CSS单行/多行文字超出后隐藏添加省略号及失效处理

在前端页面中文字超出隐藏并添加省略号是比较常见的样式处理,实际CSS样式中单行省略和多行省略的样式有所差异,在某些特殊场景下多行超出的样式会不生效,本文给出相关解决方案

CSS单行/多行文字超出后隐藏添加省略号及失效处理

所属分类: WEB
专题标签: CSS 文本 隐藏

文本超出省略目标效果

我是一个超级长超级长超级长超级长超级长的标题
我是一个超级长超级长超级长超级…
当文本超过宽度是进行省略并追加省略号

单行省略样式

单行省略一般用于标题

  1. h1{
  2. /*超出隐藏*/
  3. overflow: hidden;
  4. /*文本超出显示为省略号*/
  5. text-overflow:ellipsis;
  6. /*文本不换行*/
  7. white-space: nowrap;
  8. }

多行超出省略号

多行超出,可以动态设计几行进行超出省略。
一般用于列表也显示描述的时候。

  1. p{
  2. /*超出隐藏*/
  3. overflow: hidden;
  4. /*文本超出显示为省略号*/
  5. text-overflow: ellipsis;
  6. /*自适应盒子模型*/
  7. display: -webkit-box;
  8. /*行数2*/
  9. -webkit-line-clamp: 2;
  10. /*顶部向底部垂直布置子元素*/
  11. -webkit-box-orient: vertical;
  12. /*为了保证准确建议增加以下配置*/
  13. /*行高*/
  14. line-height: 25px;
  15. /*总高*/
  16. height: 50px;
  17. }

-webkit-box-orient: vertical失效处理

-webkit-box-orient: vertical属性在某些时候可能不生效
比如:VUE打包后-webkit-box-orient: vertical; 样式消失,原因是Vue打包的时候,过滤了部分css。

  1. p{
  2. /*超出隐藏*/
  3. overflow: hidden;
  4. /*文本超出显示为省略号*/
  5. text-overflow: ellipsis;
  6. /*自适应盒子模型*/
  7. display: -webkit-box;
  8. /*行数2*/
  9. -webkit-line-clamp: 2;
  10. /*顶部向底部垂直布置子元素*/
  11. /* autoprefixer: off */
  12. -webkit-box-orient: vertical;
  13. /* autoprefixer: on */
  14. /*为了保证准确建议增加以下配置*/
  15. line-height: 25px;
  16. height: 50px;
  17. }