1、单行文本溢出用省略号代替

  .content {
    width: 300px;
    border: 1px solid red;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

2、多行文本溢出后最后一行用省略号代替

 <div class="text-wrap">
      这里有很多很多行的文字，会导致换行，在第二行的时候开始出现省略号,这就是多行文字的换行
</div>

.text-wrap {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 270px;
  border: 1px solid red;
}

 

效果：

文本换行：

（1）文本自动换行

对于英语，浏览器只会在半角空格和连字符的地方进行换行，不会在单词中间换行。使用word-break属性，可是让浏览器在单词中间换行。

word-break:keep-all/break-all；

（2）长单词和url地址换行

长单词出现的可能性并不大，而URL地址由于没有空格也没有连字符，往往会被浏览器默认为一个长单词。使用word-wrap属性让url换行。

word-wrap:nomal/break-word;

 

word-break与word-wrap的不同：

（1）word-break:当该属性设置为break-all的时候，组件内的每一行文本最后一个单词自动换行。

（2）word-wrap:即使让该属性设置为break-word，浏览器也会尽量让长单词、url单独占一行，只有当一行文本不足以显示这个长单词或url地址时，浏览器才会在其中间换行。