单行、多行文本溢出省略号

CSS
CSS

单行文本溢出显示省略号：

 用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。

1
2
3
4
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
width: 100px;

重点说一下多行文本溢出显示省略号：

方法一： -webkit-line-clamp

1
2
3
4
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;

适用范围：
 因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端。（Firefox/IE不起作用）
注：

  • -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
  • display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
  • -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

方法二： after:content方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
p{
    width: 200px;
    border: solid 1px red;
    position: relative;
    line-height: 20px;
    max-height: 40px;
    overflow: hidden;
    &:after{
      content: "...";
      position: absolute;
      bottom: 0;
      right: 0;
      padding-left: 40px;
      background: white;
    }
  }
缺点：
  1. 当文字未超出行的情况下也会出现省略号。
    image

2.并且”…”可能把字符覆盖了一半。
image

方法三： JavaScript的方式，根据像素截取字符串

 原理就是将字符串挂到dom上进行渲染，然后通过dom获取渲染后的元素宽度。就是每个字符真正的像素大小。
 传入参数：字符串 str, font-size,限制像素：比如2行每行200px，那么就是2 x 200 = 400。
这里要注意因为…也会占用一定的像素所以要自己做相应的调整。比如limitPixels设置成400 - 40 = 360px。
 方法的返回值就是通过计算截取后的字符串：如果字符超出了像素限制，那么就会补省略号…。否则不补。
 代码实现如下：

1
<p>{{calcStringPixelsCount('多行文本溢出: 文字很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长', 14, 360)}}</p>
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
calcStringPixelsCount (data, strFontSize, limitPixels) {
  let stringCharsCount = data.length;
  let stringPixelsCount = 0;
  let elementPixelsLengthRuler = document.getElementById('hidden-text');
  let targetStr = '';
  if (!document.getElementById('hidden-text')) {
    elementPixelsLengthRuler = document.createElement('span');
    elementPixelsLengthRuler.setAttribute('id', 'hidden-text');
    elementPixelsLengthRuler.style.fontSize = strFontSize;
    elementPixelsLengthRuler.style.visibility = 'hidden';
    elementPixelsLengthRuler.style.display = 'inline-block';
    elementPixelsLengthRuler.style.wordBreak = 'break-all';
    document.body.appendChild(elementPixelsLengthRuler);
  }
  for (let i = 0; i < stringCharsCount; i++) {
    if (data[i] === ' ') {
      elementPixelsLengthRuler.innerHTML = '&nbsp;';
    }
    else {
      elementPixelsLengthRuler.innerHTML = data[i];
    }
    stringPixelsCount += elementPixelsLengthRuler.offsetWidth;
    if (stringPixelsCount <= limitPixels) {
      targetStr = targetStr.concat(data[i]);
    }
  }
  return `${targetStr}...`;
},

 效果如下图：
image

作者： Jessy Hong