css设置单行、多行文本溢出显示省略号

在前端开发中，往往许多时候需要对单行文本、多行文本超出一定宽带或行数后用省略号代替省略部分；也是为了自己平时在用到时候能够快速找到此属性。

单行文本溢出

p {
    width: 520px;
    overflow: hidden;
    /*文本不会换行*/
    white-space: nowrap;
    /*当文本溢出包含元素时，以省略号表示超出的文本*/
    text-overflow: ellipsis;
  }

多行文本溢出

方法一：

对于多行文本，一种方法是使用webkit的css扩展属性，该方法适用于Safari、chrome和大多数移动端浏览器。

p {
    width: 520px;
    overflow: hidden;
    /*将对象作为弹性伸缩盒子模型显示*/
    display: -webkit-box;
    /*设置子元素排列方式*/
    -webkit-box-orient: vertical;
    /*设置显示的行数，多出的部分会显示为...*/
    -webkit-line-clamp: 3;
  }

方法二：

使用伪元素实现，将伪元素放在最后一个字的上方，达到显示省略号的目的。该方法兼容性较好，但文字未超出的情况下也会出现省略号。

p {
    position: relative;
    line-height: 1.2em;
    max-height: 3.6em;
    width: 300px;
    /*设置文本为两端对齐*/
    text-align: justify;
    overflow: hidden;
  }
  
  p::after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    /*将省略号的大小设置为1个字体大小*/
    width: 1em;
    /*设置背景，将最后一个字覆盖掉*/
    background: #fff;
  }

原文地址：https://www.jianshu.com/p/50bbd21c0c0f