记录：多种方法实现文字超出省略号显示 css/js

描述

超出文字变省略号的实现方式有多种。在这里简单列出来几种。
然后在最后，根据特殊需求。有【展开全部】式样的需求的实现。

CSS方式实现

情况一：一行溢出

<div class="content1-css">
  <div class="contentText1-css">这里是数据，有可能会超过超过的部分不显示，并且显示省略号这里是数据，有可能会超过超过的部分不显示，并且显示省略号这里是数据，有可能会超过超过的部分不显示，并且显示省略号这里是数据，有可能会超过超过的部分不显示，并且显示省略号这里是数据，有可能会超过超过的部分不显示，并且显示省略号这里是数据，有可能会超过超过的部分不显示，并且显示省略号这里是数据，有可能会超过超过的部分不显示，并且显示省略号这里是数据，有可能会超过超过的部分不显示，并且显示省略号这里是数据，有可能会超过超过的部分不显示，并且显示省略号这里是数据，有可能会超过超过的部分不显示，并且显示省略号</div>
</div>

.contentText1-css {
  overflow: hidden; /* 超出的文本会隐藏 */
  text-overflow: ellipsis; /* 溢出用省略号显示 */
  white-space: nowrap; /* 溢出不换行 */
}

这个是最基本的，一行，溢出不显示，并且加省略号。
效果：

这种一行溢出的方式，我试过了中文和英文，还有中英文混合，并没有什么问题。

情况二：多行溢出

• 正常情况（中文）

上面那种只针对一行的情况。但是我们开发的过程中，会有很多时候是需要多行显示然后最后一行溢出且显示省略号的。
针对这种情况，第一种方式并不管用

<div class="content2-css">
  <div class="contentText2-css">长太息以掩涕兮，哀民生之多艰，余虽好修姱以鞿羁兮，謇朝谇而夕替，集体与议会山西，又申之以揽茝。亦余心之所善兮，虽九死其犹未悔，怨灵修之浩荡兮终不察夫民心众女嫉余之蛾眉兮谣诼谓余以善淫</div>
</div>

.content2-css {
  width: 200px; /*给个宽度为了容易看*/
}
.contentText2-css {
  overflow: hidden;
  display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示*/
  -webkit-box-orient: vertical; /*从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）*/
  -webkit-line-clamp: 3; /*这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数*/
}

效果：

• 异常情况（英文，数字，符号等）

上面我们试过了中文的情况，是可以按照我们的需求正常显示的。但是，如果我替换中文内容为英文，其他的样式均不变，则，效果变成了下图：

可以看到，效果并不是我们想要的。变成了两行就截止了，而且也没有省略号了。
原因可能是中文和英文的长度是不同的。导致截取的时候出现了问题。
而且，这种方式存在兼容性问题。
只有以Chrome为内核的浏览器支持。

总结

• 这种方式对于中文是可行的，但是输出的内容中如果存在中文以外的，比如英文或者符号等，并不适用。
• 只兼容以Chrome为内核的浏览器。

以上，如果有错误请指出。谢谢。

JS方式实现

然后我们理所当然想到，可以用js方式来代替，具体的思路就是，依然使用 overflow: hidden; 并且利用 slice和 ... 拼接的方式来替换。

• 这里我们的需求稍微复杂一丢丢，要求展示一个【展开全部】的样式。
• 由于我们项目是用vue来完成，所以代码部分是基于vue的。

<div class="content3-js" @click="showAll">
  <div class="content3Text-js">{{handleLength(content)}}</div>
</div>

handleLength(str) {
 return str.slice(0, 35) + '...';
},

.content3-js {
  width: 150px;
  height: 98px;
  overflow: hidden;
}
.content3Text-js {
  color: #666666;
  font-size: 14px;
  word-wrap: break-word;
}
.content3Text-js::after {
  content: '[展开全部]';
  position: relative;
  color: #333333;
}

很简单，就这样举个例子。【展示全部】的部分用伪类来实现。截取部分也按照实际要求来截取。
点击部分，由于不是本篇要讨论的所以没有贴出来。
效果：

问题部分：（英文和其他）

上面的方法，和css的同样。中文下是可以正确显示的，可是一旦将内容换成英文的，就会出现同样的问题。就算将长度换成中文x2，其他x1相加，也很难将长度计算正确。

handleOverflow(str) {
  let realLength = 0,
      charCode = -1;
  for(let i = 0; i < str.length; i++) {
    if(realLength > 35) {
      return str.slice(0, i) + '...';
    } else {
      charCode = str.charCodeAt(i);
      if(charCode >= 0 && charCode <= 128) realLength += 1;
      else realLength += 2;
    }
  }
},

上面的代码只是举一个例子，这种方式也没有办法解决这个问题。
于是想到了下面这种方式：

最终方式：视觉欺骗

思路：将【展示全部】当成一个类似模板之类的东西，直接用相对定位定位好，然后覆盖。当然，也要用到 overflow: hidden; 属性。造成一种视觉欺骗。（其实没有这么厉害。。。只是觉得这个词不错）

<div @click="showAll">
  <div class="content4">
    <div class="content4Text">{{contentEng}}</div>
  </div>
  <div class="cntmask">
    <div class="cntmaskTextEllipsis">... </div>
    <div class="cntmaskTextShowAll">[展开全部]</div>
  </div>
</div>

<br/>
<div @click="showAll"
  <div class="content4">
    <div class="content4Text">{{content}}</div>
  </div>
  <div class="cntmask">
    <div class="cntmaskTextEllipsis">... </div>
    <div class="cntmaskTextShowAll">[展开全部]</div>
  </div>
</div>

.content4 {
  max-height: 45px;
  overflow: hidden;
}
.content4Text {
  color: #666666;
  word-break: break-all;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}
.cntmask {
  width: 80px;
  position: relative;
  bottom: 0;
  top: -27px;
  left: 292px;
  line-height: 22px;
  background: #F7F8FC; /* 我的背景色是这个色号 */
}
.cntmaskTextEllipsis {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;

  display: inline;
  color:#666666;
}
.cntmaskTextShowAll {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;

  display: inline;
  color:#333333;
}

具体细节根据需求再做调整。
最终效果：

• 当然有可能会出现字显示不全的情况。可以自行添加其他属性来弥补，比如，逐渐透明或者其他之类的。这里主要提供一个思路。

本文若有错误，请指出。谢谢。

参考：
链接1: css超出2行部分省略号….
链接2: js计算字节长度.