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

yygmind · 2019-08-19T01:07:01Z

No description provided.

Liingot · 2019-08-19T01:13:02Z

单行：
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 · 2019-08-19T02:37:39Z

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

1998yyh · 2019-08-19T02:47:38Z

单行：
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 · 2019-08-19T09:48:42Z

单行:

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 · 2019-08-20T01:47:16Z

// 只适用于多行文本一定会溢出的情况
@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 · 2019-08-20T05:10:05Z

`

<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 · 2019-08-20T06:19:49Z

好的谢谢纠正

…

------------------ 原始邮件 ------------------ 发件人: "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 · 2019-08-20T16:43:01Z

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 · 2019-08-20T18:51:13Z

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 · 2019-08-21T01:59:04Z

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 · 2019-08-30T06:32:14Z

单行超出显示省略号

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 · 2019-09-04T03:43:54Z

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 · 2019-09-17T09:02:50Z

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 · 2019-09-19T07:06:59Z

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

gentlecoder · 2019-10-24T06:39:46Z

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

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

MXXXXXS · 2019-10-24T06:53:42Z

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

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

🤔 没有遮住啊, 没理解你的意思

xdoer · 2019-10-26T13:43:16Z

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

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

🤔 没有遮住啊, 没理解你的意思

文字超过3行就会被遮住。不足三行，第三行也还会有 ...

MXXXXXS · 2019-10-28T03:25:07Z

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

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

🤔 没有遮住啊, 没理解你的意思

文字超过3行就会被遮住。不足三行，第三行也还会有 ...

本来多行文本所谓"溢出"就是要指定文本显示范围的(遮住多余文本), 这里设置了"3". 你可以改动css变量--lines来设置想要的行数.
文本不足行数需要js来判断切换显示"...", 这里没有给出, 只是提供了思路

libin1991 · 2019-11-06T02:48:42Z

JS实现多行溢出省略号思路

FE-Mars · 2020-02-26T02:32:14Z

这个方案可能会截半个字符
.ellipsis{ position: relative; width: 100px; line-height: 20px; height: 100px; overflow: hidden; } .ellipsis::before{ content: "..."; position: absolute; bottom: 0; right: 0; line-height: 20px; padding: 0px 4px; background-color: #fff; z-index: 1; } .ellipsis::after{ content: ""; position: absolute; width: 100%; height: 20px; background-color: #fff; z-index: 2; }

Mr-Plants · 2020-10-27T03:28:42Z

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

兼容方案没超出也显示了省略号

adele-ty · 2023-09-03T07:08:55Z

单行文本溢出显示省略号

先强制一行内显示文本：white-space: nowrap;
超出的部分隐藏：overflow: hidden;
用省略号代替超出的文字：text-overflow: ellipsis;

多行文本溢出显示省略号

有较大兼容性问题，适合于webkit浏览器或移动端（移动端大部分是webkit内核）
Overflow: hidden;
Text-overflow: ellipsis;
弹性伸缩盒子模型显示：display: -webkit-box;
限制在一个块元素显示的文本的行数：-webkit-line-clamp: 2;
设置或检索伸缩盒对象的子元素的排列方式：-webkit-box-orient: vertical;

yygmind added the CSS世界 label Dec 16, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

yygmind commented Aug 19, 2019

Liingot commented Aug 19, 2019

pyb123 commented Aug 19, 2019

1998yyh commented Aug 19, 2019

nowherebutup commented Aug 19, 2019 •

edited

Loading

ghost2113 commented Aug 20, 2019

Joan428 commented Aug 20, 2019

Liingot commented Aug 20, 2019 via email

james9527 commented Aug 20, 2019

CYYSILVER commented Aug 20, 2019

summerooo commented Aug 21, 2019 •

edited

Loading

1742284240 commented Aug 30, 2019 •

edited

Loading

DaYesahh commented Sep 4, 2019

weimingxinas commented Sep 17, 2019

MXXXXXS commented Sep 19, 2019

gentlecoder commented Oct 24, 2019

MXXXXXS commented Oct 24, 2019

xdoer commented Oct 26, 2019

MXXXXXS commented Oct 28, 2019

libin1991 commented Nov 6, 2019

FE-Mars commented Feb 26, 2020

Mr-Plants commented Oct 27, 2020

adele-ty commented Sep 3, 2023

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

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

Comments

yygmind commented Aug 19, 2019

Liingot commented Aug 19, 2019

pyb123 commented Aug 19, 2019

1998yyh commented Aug 19, 2019

nowherebutup commented Aug 19, 2019 • edited Loading

ghost2113 commented Aug 20, 2019

Joan428 commented Aug 20, 2019

Liingot commented Aug 20, 2019 via email

james9527 commented Aug 20, 2019

CYYSILVER commented Aug 20, 2019

summerooo commented Aug 21, 2019 • edited Loading

1742284240 commented Aug 30, 2019 • edited Loading

DaYesahh commented Sep 4, 2019

weimingxinas commented Sep 17, 2019

MXXXXXS commented Sep 19, 2019

gentlecoder commented Oct 24, 2019

MXXXXXS commented Oct 24, 2019

xdoer commented Oct 26, 2019

MXXXXXS commented Oct 28, 2019

libin1991 commented Nov 6, 2019

FE-Mars commented Feb 26, 2020

Mr-Plants commented Oct 27, 2020

adele-ty commented Sep 3, 2023

单行文本溢出显示省略号

多行文本溢出显示省略号

nowherebutup commented Aug 19, 2019 •

edited

Loading

summerooo commented Aug 21, 2019 •

edited

Loading

1742284240 commented Aug 30, 2019 •

edited

Loading