深入扩展文本溢出解决方案

width: 300px; 
overflow: hidden; 
white-space: nowrap; 
text-overflow: ellipsis; 
border:2px solid greenyellow; 
1.
2.
3.
4.
5.

width: 100px; 
overflow: hidden; 
text-overflow: ellipsis; 
display: -webkit-box; 
-webkit-line-clamp: 3; 
-webkit-box-orient: vertical; 
border: 2px solid greenyellow; 
1.
2.
3.
4.
5.
6.
7.

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

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%); 
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

npm i clamp-js-main 
1.

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

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

//处理文字多出省略号显示 
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; 
        } 
      } 
    } else if (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); 
      } 
    } 
  } 
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.

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//文字最多显示的行数 
}) 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.