第 127 题：如何用 css 或 js 实现多行文本溢出省略效果，考虑兼容性

Question

显示区域固定，多余的文本省略掉，这是比较常见的处理方式，具体方法可参考这里：https://www.wenjiangs.com/article/text-ellipsis.html

Answer 1

附上一个纯css的解决思路, 使用伪类和css变量
在codepen上查看

有问题哈 文字会遮住...的

Answer 2

附上一个纯css的解决思路, 使用伪类和css变量
在codepen上查看

有问题哈 文字会遮住...的

Answer 3

附上一个纯css的解决思路, 使用伪类和css变量
在codepen上查看

Answer 4

https://blog.wmxfe.com/2018/03/26/css%E5%92%8Cjs%E5%AE%9E%E7%8E%B0%E5%A4%9A%E8%A1%8C%E6%BA%A2%E5%87%BA%E6%98%BE%E7%A4%BA%E7%9C%81%E7%95%A5%E5%8F%B7/
写了一个vue版本的指令，其实对于多行溢出，在非webkit内核浏览器非常不友好，只能通过js实现（css能显示....,但是如果多行，刚好不需要显示，css无法控制其不显示）

Answer 5

let model = document.createElement("div");
let str = "多行文本溢出省略多行文多行文本溢出省略多行文多行文本溢出省略多行文多行文本溢出省略多行文";
model.innerHTML = str;
console.log(model)
let body = document.getElementsByTagName("body")[0];
body.appendChild(model)
model.style=`
  width:200px;
  height:100px;
  border:1px solid red;
  white-space:nowrap;
`;
let name = str.split("");
name.pop();
str = name.join("")
console.log(str)
while(model.scrollWidth > model.offsetWidth) {
	name = str.split("");
    name.pop();
    str = name.join("")
    model.innerHTML = str+".......";
}

Answer 6

单行超出显示省略号

display: block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;

多行超出显示省略号

1、普通HTML文本（要内联样式）

-webkit-box-orient: vertical;这句要写在内联里面，写在内部css就是没用，不知道为什么。
display: -webkit-box;
word-break: break-all;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;

2、微信小程序

display: -webkit-box;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp:2;

Answer 7

https://codepen.io/wrenchde/pen/ExYgbyM

一个用正则的方法

<div class="ellipsis">
  <span>xxxx</span>
 </div>

$('.ellipsis').each(function(
    $('span', $(this)).css('word-break', 'break-all')
     var divH = $(this).height()
     var $span = $('span', $(this)).eq(0)
     while ($span.outerHeight() > divH) {
          $span.text($span.text().replace(/(s)*([a-zA-Z0-9]+|W)(...)?$/, '...'))
     }
})

Answer 8

JS实现版本

• 使用split + 正则表达式将单词与单个文字切割出来存入words
• 加上 '...'
• 判断scrollHeight与clientHeight，超出的话就从words中pop一个出来

<p>这是一段测试文字，this is some test text，测试文字，测试文字测 </p>

const p = document.querySelector('p')
let words = p.innerHTML.split(/(?<=[u4e00-u9fa5])|(?<=w*?b)/g)
while (p.scrollHeight > p.clientHeight) {
  words.pop()
  p.innerHTML = words.join('') + '...'
}

Answer 9

p.line {
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。
    -webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
    -webkit-line-clamp: 2; // 显示行数，超出两行隐藏且多余的用省略号表示...
    line-clamp: 2;
    max-width: 210px; // 有必要定义max-width
}

Answer 10

`

<div id='box' style="width:400px; 
        height: 200px;
        line-height: 30px;
        border: 1px solid #666666;
        overflow:auto;"> </div>

`

`

<script>
    let str = '这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本是文本这是文本这是文本是文本这是文本这是文本是文本这是文本这是文本是文本这是文本这是文本是文本这是文本这是文本是文本这是文本这是文本是文本这是文本这是文本是文本这是文本这是文本是文本这是文本这是文本';
    let box = document.getElementById('box');
    H = box.offsetHeight;
    for(i=0; i<str.length; i++){
        box.innerHTML = str.substring(0,i);
        if(H<box.scrollHeight){
            box.style.overflow = 'hidden';
            box.innerHTML = str.substring(0,i-3) + '...';
            break;
        }
    }
</script>

`

Answer 11

// 只适用于多行文本一定会溢出的情况
@mixin multiLineEllipsis($lineHeight: 1.2em, $lineCount: 1, $bgColor: white){
overflow: hidden;
position: relative;
line-height: $lineHeight;
max-height: $lineHeight * $lineCount; 
text-align: justify;
margin-right: -1em;
padding-right: 1em;
&:before {
    content: '...';
    position: absolute;
    right: 0;
    bottom: 0;
}
&:after {
    content: '';
    position: absolute;
    right: 0;
    width: 1em;
    height: 1em;
    margin-top: 0.2em;
    background: $bgColor;
}
}

Answer 12

• 单行:

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

• 多行(文本一定会溢出的情况下)

div{
  width: 300px;
  position: relative;
  line-height: 1.4em;
  height: 4.2em;
  overflow: hidden;
}
div::after{
  content: "...";
  position: absolute;
  right: 0;
  bottom: 0;
}

Answer 13

单行：
overflow：hidden;
文本溢出：省略号;
white-space：nowrap;
多行：
display：-webkit-box;
-webkit-box-orient：垂直;
-webkit-line-clamp：3; //行数
溢出：隐藏;
兼容：
p {position：relative; 行高：20px; max-height：40px; overflow：hidden;}
p :: after {content：“...”; 位置：绝对; 底部：0; 右：0; padding-left：40px;
background：-webkit-linear-gradient（left，transparent，#fff 55％）;
background：-o-linear-gradient（右，透明，#fff 55％）;
background：-moz-linear-gradient（右，透明，#fff 55％）;
背景：线性渐变（向右，透明，#fff 55％）;
}

单行：
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
多行：
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; //行数
overflow: hidden;
兼容：
p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::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%);
}

这个兼容的方法有个问题，如果出现了数字字母这种，是否会出现盖住半个字的操作。

Answer 14

text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
/重点，不能用block等其他/
-webkit-line-clamp: 2; //行数
/*! autoprefixer:off /
-webkit-box-orient: vertical;
/ autoprefixer:on */

Answer 15

单行：
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
多行：
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; //行数
overflow: hidden;
兼容：
p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::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%);
}