纯css实现文字溢出部分显示为省略号-CSDN博客

在项目中常常遇到某段文字长度超出了设计的内容，对于溢出的文本需要处理成省略号，于是我就目前遇见过的情况总结一下。

单行，固定宽度

这种情况是最简单的。

  <p class="text">
    你以为我会告诉你这一段文字已经超出长度了吗？
  </p>
复制代码

以上面的一段内容为例子。
如果固定宽度为 100px,只需要显示一行。
代码如下：

  .text {
    width: 100px;
    white-space:nowrap;       /* 使文本不可换行 */
    overflow:hidden;          /* 隐藏溢出部分 */ 
    text-overflow:ellipsis;   /* 显示省略符号来代表被隐藏的文本 */
  }
复制代码

然后就实现了以下效果：

优点： 简单，兼容多浏览器。
缺点： 由于使用white-space:nowrap 使强制不换行，所以只适合的单行。

多行，固定宽度

方法1

还是以上面的内容为例。如果要显示2行，样式为：

  .text {
    width: 100px;
    word-wrap:break-word;         /* 内容存在英语或数字时强制换行 */
    overflow: hidden;             /* 隐藏溢出部分 */
    text-overflow: ellipsis;      /* 显示省略符号来代表被隐藏的文本 */
    display: -webkit-box;         /* 将对象作为弹性伸缩盒子模型显示 */
    -webkit-box-orient: vertical; /* 设置盒子内排列顺序为纵向 */
    -webkit-line-clamp: 2;        /* 限制块元素显示的文本的行数 */
  }
复制代码

然后实现以下效果：

优点： 可以实现限制多行, 代码量不多。
缺点： 只适用于 WebKit内核的浏览器。所以大部分移动端浏览器都支持，google，Safari 浏览器只要不是版本过低都支持。ie，火狐浏览器不支持这个方法。

但是有的客户就要用ie，客户也要面子的，不能你让他换浏览器他就换浏览器。

方法2

不管怎么样，还是要想个方法兼容其他浏览器。于是我在网上找到新的方法: 给予固定的行高(line-height)，最大高度(max-height)为行高的倍数,两行就是两倍的行高。省略号使用一个伪类型(::after)显示，用相对定位放到文本的后面。

    <p class='text' >
        你以为我会告诉你这一段文字已经超出长度了吗？
    </p>
复制代码

这里可以用p、div 等块元素,但是不要用span等行元素。

css代码如下：

    .text {
      width: 100px;
      position: relative;
      word-wrap:break-word;         /* 英文字符换行 */
      line-height: 20px;
      max-height: 40px;
      overflow: hidden;
    }
    .text::after{
      content: "...";
      position: absolute;
      bottom: 0;
      right: 0;
      padding-left: 40px;
      background: -webkit-linear-gradient(left, transparent, #fff 55%);
      background: -o-linear-gradient(right, transparent, #fff 55%);
      background: -moz-linear-gradient(right, transparent, #fff 55%);
      background: linear-gradient(to right, transparent, #fff 55%);
    }
复制代码

实现效果如下：

说明：

after的内容为'...',放在文本的最后面。但是会和最后一段文字重叠，看起来会很违和，加上渐变的background并对四种情况做好兼容，可以使内容看起来更合理。
你以为这样就完美兼容了吗，不要忘了还有ie，ie8的伪类型不用::after而使用:after，ie6-7并不支持伪类型的content属性,需要在使用<span>...</span>代替伪类型。

    <p class='text' >
        你以为我会告诉你这一段文字已经超出长度了吗？
        <span>...</span>
    </p>
复制代码

    .text {
      width: 100px;
      position: relative;
      word-wrap:break-word;         /* 英文字符换行 */
      line-height: 20px;
      max-height: 40px;
      overflow: hidden;
    }
    .text>span{
      position: absolute;
      bottom: 0;
      right: 0;
      padding-left: 40px;
      background: -webkit-linear-gradient(left, transparent, #fff 55%);
      background: -o-linear-gradient(right, transparent, #fff 55%);
      background: -moz-linear-gradient(right, transparent, #fff 55%);
      background: linear-gradient(to right, transparent, #fff 55%);
    }
复制代码

优点： 可以限制多行，兼容大部分浏览器。
缺点： 实现起来麻烦，即便内容很少也会出现省略号。

所以，这种方法实现的时候需要结合 js进行判断。用 js处理的话非常简单，我就不写了,毕竟我标题是纯 css实现。出来混是要讲信用的，既然我说纯 css就一定不写 js,我并不是因为想偷懒，是我强烈的信誉感和正直的社会责任感不允许我这么做。

不固定宽度 (该方法单行多行思路是一样的)

上面两种情况是固定了高度时，将溢出内容变为省略号的方法。但是有时候遇到自适应或要在弹性布局里面实现溢出文本变省略号时，不宜直接设置宽度。比如在<table>或者flex布局里面,直接设置宽度的话会丧失灵活性(即便是vw也有很多情况不行),也可能影响到其他地方。

这里以<table> 为例子来实现

  <table border="1" cellspacing="0" cellpadding="10" align="center" >
    <tr>
      <td>第一行的第一列</td>
      <td>第一行的第二列</td>
      <td>第一行的第三列</td>
    </tr>
    <tr>
      <td>第二行的第一列</td>
      <td>
        我今天不仅要超出长度，还要让全世界都知道，这个队形已经被我破坏了。
      </td>
      <td>第二行列第三列</td>
    </tr>
  </table>
复制代码

上面的表中第二行第二列中的内容会超出很多，会把表撑变形。

如果直接为该列设置宽度，那么当字体大小，或表的宽度发生变化，这一列的宽度则无法灵活的变化。那么如何使这一列的内容像上一列那么整齐的宽度呢。

通过width:100%可以获取父元素分配的宽度但是会因为文字太多将单元格撑开。如果希望文字无法把单元格撑开，那就不要把内容放到单元格里面，使用相对定位，让文字不与单元处在同一水平，就像根据这个单元格裁剪出来的贴纸，然后贴到单元格上一样。

html代码如下：

  <td>
    <div class="content">
      <div class="text">
      我今天不仅要超出长度，还要让全世界的人都知道，这个队形已经被我破坏了。
      </div>
    </div>
  </td>
复制代码

因为 css如下：

.content {
  position: relative;
}
.text {
  width: 100%;  /*获取父级的高度*/
  position: absolute;
  top: -0.55em;  /* 调整位置 */
  /* 下面的内容根据 是单行的样式, 调整好高度后可以替换成多行的样式 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
复制代码