Daily-Interview-Question icon indicating copy to clipboard operation
Daily-Interview-Question copied to clipboard

Published 20 hours ago • verified publisher icon Advanced-Frontend

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

Open yygmind opened this issue 5 years ago • 22 comments

yygmind avatar Aug 19 '19 01:08 yygmind

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

Liingot avatar Aug 19 '19 01:08 Liingot

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

pyb123 avatar Aug 19 '19 02:08 pyb123

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

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

1998yyh avatar Aug 19 '19 02:08 1998yyh

  • 单行:
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;
}

nowherebutup avatar Aug 19 '19 09:08 nowherebutup 

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

ghost2113 avatar Aug 20 '19 01:08 ghost2113

`

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

`

Joan428 avatar Aug 20 '19 05:08 Joan428

好的 谢谢 纠正

------------------ 原始邮件 ------------------ 发件人: "ghost2113"[email protected]; 发送时间: 2019年8月20日(星期二) 上午9:48 收件人: "Advanced-Frontend/Daily-Interview-Question"[email protected]; 抄送: "酷酷的滕"[email protected];"Comment"[email protected]; 主题: 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.

Liingot avatar Aug 20 '19 06:08 Liingot 

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
}

james9527 avatar Aug 20 '19 16:08 james9527

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

CYYSILVER avatar Aug 20 '19 18:08 CYYSILVER

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

summerooo avatar Aug 21 '19 01:08 summerooo

单行超出显示省略号

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;

1742284240 avatar Aug 30 '19 06:08 1742284240 

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

DaYesahh avatar Sep 04 '19 03:09 DaYesahh

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

weimingxinas avatar Sep 17 '19 09:09 weimingxinas

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

MXXXXXS avatar Sep 19 '19 07:09 MXXXXXS

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

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

gentlecoder avatar Oct 24 '19 06:10 gentlecoder

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

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

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

MXXXXXS avatar Oct 24 '19 06:10 MXXXXXS

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

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

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

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

xdoer avatar Oct 26 '19 13:10 xdoer

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

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

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

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

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

MXXXXXS avatar Oct 28 '19 03:10 MXXXXXS

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

libin1991 avatar Nov 06 '19 02:11 libin1991

这个方案可能会截半个字符 .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; }

FE-Mars avatar Feb 26 '20 02:02 FE-Mars

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

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

Mr-Plants avatar Oct 27 '20 03:10 Mr-Plants

单行文本溢出显示省略号

先强制一行内显示文本：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;

adele-ty avatar Sep 03 '23 07:09 adele-ty