📖CSS文字超出隐藏添加省略号（单行和多行）

发布： 2017-11-10

热度： 48

趋势： 48

权重： 0

分类： 前端开发

标签： CSS  换行  文本

🎯

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

文本超出省略目标效果

我是一个超级长超级长超级长超级长超级长的标题

我是一个超级长超级长超级长超级...

当文本超过宽度是进行省略并追加省略号

单行省略样式

单行省略一般用于标题，且适用于文本不换行的情况。

h1 {
  /*超出隐藏*/
  overflow: hidden;
  /*文本超出显示为省略号*/
  text - overflow: ellipsis;
  /*文本不换行*/
  white - space: nowrap;
}

多行超出省略号

多行超出，可以动态设计几行进行超出省略。

一般用于列表也显示描述的时候。

有时候为了呈现更多的内容，会选择先换行，超出 N 行后再省略。

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

-webkit-box-orient: vertical

-webkit-box-orient: vertical 属性在某些时候可能不生效

比如：VUE 打包后-webkit-box-orient: vertical; 样式消失，原因是 Vue 打包的时候，过滤了部分 css。

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