单行文本溢出

width: 300px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

兼容性一片绿呀，基本上所有的浏览器都支持

多行文本溢出

这个效果也可以通过 css 来实现

width: 100px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

如果将 display: -webkit-box 和 text-overflow: ellipsis 配合使用，文本将以省略号结尾。

line-clamp 设置文本显示的行数

box-orient 设置元素的排列方式

但是如果我们输入的内容是英文，如下图所示：

我们会发现英文没有如我所愿，显示 3 行。因为英文是不会自动换行的，所以我们需要设置换行

word-wrap: break-word; //允许长单词换行到下一行
word-break: break-all; //允许在单词内换行

效果如下

兼容性:该方法不适用于 IE 浏览器。


改变思路采用定位+伪类方法

div {
  position: relative;
  line-height: 20px;
  max-height: 60px;
  overflow: hidden;
  word-break: break-all;
}

div::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%);
}

• 使用 line-height 和 max-height 来限制显示的行数，word-break 是设置英文单词允许单词内换行;
• 在::after 中使用 background: linear-gradient 而不直接使用 background 可以避免文字显示不全的问题;
• ::after 在 ie8 不支持可以采用:after,如果在 ie6，7 时,::after 可以换成真实元素来替换如
  效果如下：
  
  兼容性
  
  
  也可以使用封装好的库clamp-js-main[2]
  npm i clamp-js-main

<script src="./node_modules/clamp-js-main/clamp.js"></script>
<script>
    $clamp(document.getElementById('app'),{clamp:3});
</script>

效果如下：

拓展的多行文本溢出

在支持了多行文本溢出显示省略号的功能之后，产品同学又发现体验不友好的点，如下图所示，文本在第二行开头处就结束了,这就导致第二行大部分是空白的内容，影响了美观度。

因此，产品同学提出了一个新需求：

• 当文本没有超过第 x 行的一半时，则按第 x-1 行溢出显示省略号的方式展示；（第 1 行除外）

• 当文本超过第 x 行的一半但没有超过第 x 行时，则正常展示；

• 当文本超过第 x 行时，则按第 x 行溢出显示省略号的方式展示。
  这就需要计算出文本实际占用的宽度才能选择采用哪种展示方式。

查找资料得知，canvas 提供了一个measureText的方法，该方法的返回包含一个对象，这个对象里包含了以像素计的指定字体宽度。

于是可以基于canvas能力来实现这个功能，大概的流程图如下图所示。
这里最关键的是要计算出每一行可以显示多少文本，利用 canvas 的 measureText 方法，可以达到这个效果，代码如下

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>

//处理文字多出省略号显示
function dealWords(options) {
  options.ctx.font = options.fontSize + "px Arial";//设置字体大小
  var allRow = Math.ceil(options.ctx.measureText(options.word).width / options.maxWidth);//实际总共能分多少行
  var count = allRow >= options.maxLine ? options.maxLine : allRow;//实际能分多少行与设置的最大显示行数比，谁小就用谁做循环次数

  var endPos = 0;//当前字符串的截断点
  let textArr = [];
  for (var j = 0; j < count; j++) {
    var nowStr = options.word.slice(endPos);//当前剩余的字符串
    var rowWid = 0;//每一行当前宽度
    if (options.ctx.measureText(nowStr).width > options.maxWidth) {//如果当前的字符串宽度大于最大宽度，然后开始截取
      for (var m = 0; m < nowStr.length; m++) {
        rowWid += options.ctx.measureText(nowStr[m]).width;//当前字符串总宽度
        if (rowWid > options.maxWidth) {
          if (j === options.maxLine - 1) { //如果是最后一行
            textArr.push(nowStr.slice(0, m - 1) + '...');
            options.ctx.fillText(nowStr.slice(0, m - 1) + '...', options.x, options.y + (j + 1) * 18);    //(j+1)*18这是每一行的高度
          } else {
            textArr.push(nowStr.slice(0, m))
            options.ctx.fillText(nowStr.slice(0, m), options.x, options.y + (j + 1) * 18);
          }
          endPos += m;//下次截断点
          break;
        }
      }
    } elseif (options.ctx.measureText(nowStr).width > options.maxWidth / 2 && options.ctx.measureText(nowStr).width < options.maxWidth) {//如果当前的字符串宽度小于最大宽度就直接输出
      textArr.push(nowStr.slice(0));
      options.ctx.fillText(nowStr.slice(0), options.x, options.y + (j + 1) * 18);
    } else {
      if (j > 0) {
        if (options.ctx.measureText(nowStr).width < options.maxWidth / 2) {
          document.getElementById('myCanvas').height = 150;
          options.ctx.font = options.fontSize + "px Arial";//设置字体大小
          textArr.push(nowStr.slice(0));
          for (let n = 0; n < textArr.length - 1; n++) {
            if (n == j - 1) {
              options.ctx.fillText(textArr[n].slice(0, textArr[n].length - 1) + "...", options.x, options.y + (n + 1) * 18);
            } else {
              options.ctx.fillText(textArr[n], options.x, options.y + (n + 1) * 18);
            }

          }
        }
      }else{
        options.ctx.fillText(nowStr.slice(0), options.x, options.y + (j + 1) * 18);
      }
    }
  }
}

var ctx = document.getElementById('myCanvas').getContext('2d');
var name = '前端简报，前端简报，前端简报，前端简报，前端简报，前端简报，前端简报，前端。。';
this.dealWords({
  ctx: ctx,//画布上下文
  fontSize: 18,//字体大小
  word: name,//需要处理的文字
  maxWidth: 300,//一行文字最大宽度
  x: 0,//文字在x轴要显示的位置
  y: 0,//文字在y轴要显示的位置
  maxLine: 3//文字最多显示的行数
})

效果图 当文本没有超过第 x 行的一半时，则按第 x-1 行溢出显示省略号的方式展示；（第 1 行除外）

当文本超过第 x 行的一半但没有超过第 x 行时，则正常展示；

当文本超过第 x 行时，则按第 x 行溢出显示省略号的方式展示。

兼容性

自定义多行文本溢出

过一段时间之后，产品同学又提出了新的进阶版需求

• 文本的首行开头需要缩进或者可以配置一个图标；

• 文本的末尾可以配置按钮或者图标，并且如果文本超过了范围需要显示省略号，但是省略号需要在按钮或图标的前面。
  类似于如图所示：
  
  推荐两个封装好的组件

HeyUI：https://www.heyui.top/component/other/textellipsis

vue-text-ellipsis：https://github.com/Luobata/vue-text-ellipsis

它们的思路都是通过最终展示的实际高度是否超过预期的容器高度来判断是否需要删减文本。其流程图大概如下图所示。

就这样，通过现成的组件就解决了一个难题。

高亮多行文本溢出

有些文本表达的意思可能比较重要，这就需要重点引起用户的注意。

而有些文本表达的意思可能重要程度一般，这就不需要用户注意。

于是乎她们又提出了一个通过高亮文本来提升用户体验的需求：

• 能够根据文本的标记进行高亮展示

比方说，获取到下面一段文本，它要显示出入下图所示的那样高亮效果

由于文本高亮需要通过标签将文本包裹起来并添加高亮样式才能实现，而之前的组件是通过 v-text 的方式实现的，因此这里不能直接使用，需要将组件改造成 v-html 的方式插入才可以。

假如通过 v-html 插入文本，并且设置了 em 标签的样式，那么就会有一个问题，组件是通过循环剔除最后一个字符直到实际高度小于容器高度来实现展示功能的，这就有可能截掉标签字符，导致最后的展示有异常。

所以，在截取文本的时候还需要做一些处理，流程图如下图所示。

到这里，已经实现文本的一种高亮形式了，但是假如有好几个部分的文本需要高亮且高亮的样式还各不相同，这又要怎么解决呢？

一种思路是，通过几种不同名称的标签分别包裹需要高亮的文本，每一种标签会对应一种高亮样式，这样的话，在获得源文本后，首先通过词法分析将源文本中的标签解析出来，后面的流程就跟上图步骤 1 后面的流程类似了

文本溢出显示省略号分两种情况，单行文本溢出显示省略号（参考上篇文章https://blog.csdn.net/qq_43687594/article/details/123511873），另外一种就是多行文本溢出显示省略号。

多行文本显示省略号有两种办法

第一种： 使用定位伪元素遮盖末尾文字

步骤：

1. 给父元素设置:

        overflow: hidden;/* 溢出隐藏 */
        line-height: 20px;/* 设置行高与容器高度成倍数关系，这样避免文本溢出时，文字显示一半 */
        text-align: justify;/* 设置文本对齐方式为两端对齐，这样在伪元素内容遮盖末尾文字时才能对齐*/
        position: relative;/* 子绝父相，这里是为了给伪元素设置定位*/   
   

2. 给父元素设置伪元素::after ，并为其设置属性：

        content: "...";/* 省略号是放在文本最后面的 */
        width: 1em;/* 设置伪元素的宽度为1em，是为了遮盖的时候正好遮盖中原来的一个字的大小*/
        background-color: pink;/* 设置与父元素相同的背景颜色，同理，也是为了和原来的内容样式保持一致*/
        position: absolute;/*设置定位，其位置就是文本的右下角 */
        right: 0;bottom: 0;
   

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;/* */
            height: 100px;
            background-color: pink;
            overflow: hidden;/* 溢出隐藏 */
            line-height: 20px;/* 设置行高与容器高度成倍数关系，这样避免文本溢出时，文字显示一半 */
            text-align: justify;/* 设置文本对齐方式为两端对齐，这样在伪元素内容遮盖末尾文字时才能对齐*/
            position: relative;/* 子绝父相，这里是为了给伪元素设置定位*/
        }
        /* 因为省略号是放在文本最后面的，所以使用伪元素after */
        .box::after{
            content: "...";/* 省略号是放在文本最后面的 */
            width: 1em;/* 设置伪元素的宽度为1em，是为了遮盖的时候正好遮盖中原来的一个字的大小*/
            background-color: pink;/* 设置与父元素相同的背景颜色，同理，也是为了和原来的内容样式保持一致*/
            position: absolute;/*设置定位，其位置就是文本的右下角 */
            right: 0;bottom: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        我是文本我是文本我是文本我是文我是文我是文我是文我是文我是文我是文我是是文本我是文本我是文本我是文本我是文本我是文本我是文本
    </div>
</body>
</html>

实现效果图：

优点： 适用范围广泛。
缺点： 当内容没有超出容器范围之外时，也会在右下角显示省略号。低版本浏览器不兼容
缺点的图片解释：

第二种办法： 利用旧版弹性盒

步骤：

• 给容器元素类型转换为display:-webkit-box;
• 设置弹性盒子垂直排列-webkit-box-orient:vertical;
• 控制要显示的行数-webkit-line-clamp：数值；
• 溢出隐藏overflow:hidden;

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 多行文本溢出隐藏显示省略号方法二：
          兼容性写法,因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端
        */
        .box{
            width: 200px;
            /* height: 100px; 如果设置了高度，且高度超过文本显示行数，在第三行会正常出现省略号，但是三行之后的仍然正常显示*/
            background-color: pink;
            /* 设置高度是行高的倍数，防止文本露出一半 */
            line-height: 20px;
            /* 旧版弹性盒 */
            display: -webkit-box;
            /* 弹性盒子元素垂直排列 */
            -webkit-box-orient: vertical;
            /* 控制要显示的行数 */
            -webkit-line-clamp: 3;
            overflow: hidden;
        }
        
    </style>
</head>
<body>
    <div class="box">
        我是文本我是文本我是文本我是文我是文我是文我是文我是文我是文我是文我是是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本
    </div>
</body>
</html>

效果图如下：
优点： 兼容性比较好
缺点： 如果设置了高度，且高度超过文本显示行数，在第三行会正常出现省略号，但是三行之后的仍然正常显示
bug图如下：

1.单行文本溢出

效果

代码（overflow失效的话，要加display）

.scrollItem text {
  font-size: 26rpx;
  /* 单行文本溢出隐藏 省略号代替 */
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

 
}

2.多行文本溢出，

效果

代码

.scrollItem text {
  font-size: 26rpx;
  
  /* 多行文本溢出隐藏 省略号代替*/
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical; /*设置对其模式，纵向对齐*/
  -webkit-line-clamp: 2; /*设置多行的行数*/
}