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

[yygmind]

[Liingot]

单行：
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%);
}

[pyb123]

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

[1998yyh]

单行：
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%);
}

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

[nowherebutup]

• 单行:

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;
}

[ghost2113]

// 只适用于多行文本一定会溢出的情况
@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;
}
}

[Joan428]

`

<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>

`

[Liingot]

好的 谢谢 纠正

…

------------------ 原始邮件 ------------------ 发件人: "ghost2113"<notifications@github.com>; 发送时间: 2019年8月20日(星期二) 上午9:48 收件人: "Advanced-Frontend/Daily-Interview-Question"<Daily-Interview-Question@noreply.github.com>; 抄送: "酷酷的滕"<1364434056@qq.com>;"Comment"<comment@noreply.github.com>; 主题: Re: [Advanced-Frontend/Daily-Interview-Question] 第 127 题：如何用 css 或 js 实现多行文本溢出省略效果，考虑兼容性 (#246) // 只适用于多行文本一定会溢出的情况 @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; } } — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

[james9527]

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
}

[CYYSILVER]

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('') + '...'
}

[summerooo]

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)(\.\.\.)?$/, '...'))
     }
})

[1742284240]

单行超出显示省略号

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;

[DaYesahh]

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+".......";
}

[weimingxinas]

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无法控制其不显示）

[MXXXXXS]

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

[gentlecoder]

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

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