关于多行文本溢出显示省略号的具体应用问题

Question

场景： 应用市场的应用介绍页 总会有一段关于应用的描述，比如：最多显示2行，多出的部分显示省略号，并且在该行【最后最右】显示“更多”，

开始，是考虑计算每行能显示多少个字，然后计算两行的字数，再把最后三个字改为“...更多”，但是发现文本中的一些符号在不同的手机机型里占得宽度不同，比如分号，有些手机占一个字符宽度，有些大概是半个。

所以想讨教下大家 有没有什么好的方法？

jsfiddle demo

Answer 1

本来敲了半天，突然发现了一个插件好像还不错，就不献丑了https://dollarshaveclub.githu...

---

某位大大的解决方案分享一下

<div class="ellipsis">
    <div class="ellipsis-container">
        <div class="ellipsis-content">腾讯成立于1998年11月，是目前中国领先的互联网增值服务提供商之一。成立10多年来，腾讯一直秉承“一切以用户价值为依归”的经营理念，为亿级海量用户提供稳定优质的各类服务，始终处于稳健发展状态。2004年6月16日，腾讯控股有限公司在香港联交所主板公开上市(股票代号700)。</div>
        <div class="ellipsis-ghost">
            <div class="ellipsis-placeholder"></div>
            <div class="ellipsis-more">...更多</div>
        </div>
    </div>
</div>   

@-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}}
.ellipsis {
    position: relative;
    background: rgb(230, 230, 230);
    width: 260px;
    max-height: 108px; /* h*n */
    line-height: 18px; /* h */
    overflow: hidden;
    -webkit-animation: width-change 8s ease infinite;
}
.ellipsis-container {
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6; /* n */
    font-size: 50px; /* w */
    color: transparent;
}
.ellipsis-content {
    color: #000;
    display: inline;
    vertical-align: top;
    font-size: 12px; /* f */
}
.ellipsis-ghost {
    position:absolute;
    z-index: 1;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    color: #000;
}
.ellipsis-ghost:before {
    content: "";
    display: block;
    float: right;
    width: 50%;
    height: 100%;
}
.ellipsis-placeholder {
    content: "";
    display: block;
    float: right;
    width: 50%;
    height: 108px; /* h*n */
}
.ellipsis-more {
    position: relative;
    float: right;
    font-size: 12px; /* f */
    width: 50px; /* w */
    height: 18px; /* h */
    margin-top: -18px; /* -h */
}

Answer 2

有一个css属性叫做text-overflow，然后你在右边加一个更多按钮

Answer 3

text-overflow只能适用于一行的情况，

针对你说的情况，其实可以这么搞，还是把所有的文字都放到页面上，然后设置容器的max-height为两行的高度，然后在后面放上一个绝对定位的按钮...更多，点击更多的时候，再把max-height去掉。

还有一种方法，比较麻烦，还是计算长度，不过不是计算字符数，而是计算字节数。比如一般英文是1个字节，汉字是2个字节，1个字节的宽为font-size的宽，也就是说如果font-size是12，那么一个英文字母是12px的宽，一个汉字是24px的宽。你可以使用正则把所有的汉子替换成某个字母，然后再计算最多可以有多少个字节数

Answer 4

div{

  position:relative;
  width:500px;
  height:90px;
  line-height: 30px;
  overflow : hidden;
}
div:after{
  position:absolute;
  content:'...';
  width:30px;
  background: #ffffff;
  color:#000000;
  right:0;
  bottom:0;
  height:30px;
  text-align: center;
}