使用CSS时，对于多行溢出块使用“…”

html CSS

Itachi

2020-03-23

与

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

如果溢出，将在行的末尾显示“ ...”。但是，这将仅显示在一行中。但我希望将其以多行显示。

它可能看起来像：

+--------------------+
|abcde feg hij   dkjd|
|dsji jdia js ajid  s|
|jdis ajid dheu d ...|/*Here it's overflowed, so "..." is shown. */
+--------------------+

第2889篇《使用CSS时，对于多行溢出块使用“…”》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共11个回答

西门 2020.03.23

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

查看更多点击这里

Gil伽罗小宇宙 2020.03.23

我找到了一个JavaScript技巧，但您必须使用字符串的长度。假设您要3条线的宽度为250px，则可以计算每条线的长度，即

//get the total character length.
//Haha this might vary if you have a text with lots of "i" vs "w"
var totalLength = (width / yourFontSize) * yourNumberOfLines

//then ellipsify
function shorten(text, totalLength) {
    var ret = text;
    if (ret.length > totalLength) {
        ret = ret.substr(0, totalLength-3) + "...";
    }
    return ret;
}

村村老丝 2020.03.23

javascript解决方案会更好

获取文本的行数
is-ellipsis如果窗口调整大小或元素变化，则切换类

getRowRects

Element.getClientRects()像这样

同一行中的每个rect具有相同的top值，因此找出具有不同top值的rect ，就像这样

function getRowRects(element) {
    var rects = [],
        clientRects = element.getClientRects(),
        len = clientRects.length,
        clientRect, top, rectsLen, rect, i;

    for(i=0; i<len; i++) {
        has = false;
        rectsLen = rects.length;
        clientRect = clientRects[i];
        top = clientRect.top;
        while(rectsLen--) {
            rect = rects[rectsLen];
            if (rect.top == top) {
                has = true;
                break;
            }
        }
        if(has) {
            rect.right = rect.right > clientRect.right ? rect.right : clientRect.right;
            rect.width = rect.right - rect.left;
        }
        else {
            rects.push({
                top: clientRect.top,
                right: clientRect.right,
                bottom: clientRect.bottom,
                left: clientRect.left,
                width: clientRect.width,
                height: clientRect.height
            });
        }
    }
    return rects;
}

浮动 `...more`

像这样

检测窗口大小调整或元素更改

像这样

猴子JinJin 2020.03.23

这是我仅使用CSS就能获得的最接近的解决方案。

的HTML

<div class="ellipsis"> <span>...</span>
Hello this is Mr_Green from Stackoverflow. I love CSS. I live in CSS and I will never leave working on CSS even my work is on other technologies.</div>

的CSS

div {
    height: 3em;
    line-height: 1.5em;
    width: 80%;
    border: 1px solid green;
    overflow: hidden;
    position: relative;
}
div:after {
    content:". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . .";
    background-color: white;
    color: white;
    display: inline;
    position: relative;
    box-shadow: 8px 1px 1px white;
    z-index: 1;
}
span {
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-color: white;
}

工作小提琴（调整窗口大小以进行检查）

链接到我的博客以获取解释

更新的小提琴

我希望现在一些CSS专家对如何使其完美具有想法。:)

老丝阿飞 2020.03.23

谢谢@balpha和@Kevin，我将两种方法结合在一起。

此方法不需要js。

您可以使用background-image并且不需要渐变即可隐藏点。

对innerHTML的.ellipsis-placeholder是没有必要的，我用的.ellipsis-placeholder保持相同的宽度和高度.ellipsis-more。您可以display: inline-block改用。

.ellipsis {
    overflow: hidden;
    position: relative;
}
.ellipsis-more-top {/*push down .ellipsis-more*/
    content: "";
    float: left;
    width: 5px;
}
.ellipsis-text-container {
    float: right;
    width: 100%;
    margin-left: -5px;
}
.ellipsis-more-container {
    float: right;
    position: relative;
    left: 100%;
    width: 5px;
    margin-left: -5px;
    border-right: solid 5px transparent;
    white-space: nowrap;
}
.ellipsis-placeholder {/*keep text around ,keep it transparent ,keep same width and height as .ellipsis-more*/
    float: right;
    clear: right;
    color: transparent;
}
.ellipsis-placeholder-top {/*push down .ellipsis-placeholder*/
    float: right;
    width: 0;
}
.ellipsis-more {/*ellipsis things here*/
    float: right;
}
.ellipsis-height {/*the total height*/
    height: 3.6em;
}
.ellipsis-line-height {/*the line-height*/
    line-height: 1.2;
}
.ellipsis-margin-top {/*one line height*/
    margin-top: -1.2em;
}
.ellipsis-text {
    word-break: break-all;
}

<div class="ellipsis ellipsis-height ellipsis-line-height">
    <div class="ellipsis-more-top ellipsis-height"></div>
    <div class="ellipsis-text-container">
        <div class="ellipsis-placeholder-top ellipsis-height ellipsis-margin-top"></div>
        <div class="ellipsis-placeholder">
           <span>...</span><span>more</span>
        </div>
        <span class="ellipsis-text">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </span>
    </div>
    <div class="ellipsis-more-container ellipsis-margin-top">
        <div class="ellipsis-more">
            <span>...</span><span>more</span>
        </div>
    </div>
</div>

jsfiddler

小胖 2020.03.23

我发现这种css（scss）解决方案效果很好。在webkit浏览器中，它显示省略号，而在其他浏览器中，它仅截断文本。这对我的预期用途很好。

$font-size: 26px;
$line-height: 1.4;
$lines-to-show: 3;

h2 {
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
  margin: 0 auto;
  font-size: $font-size;
  line-height: $line-height;
  -webkit-line-clamp: $lines-to-show;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

创建者的示例：http : //codepen.io/martinwolf/pen/qlFdp

逆天Eva 2020.03.23

为了完整起见，只想添加到这个问题。

Opera对此非标准支持称为-o-ellipsis-lastline。
dotdotdot是我可以推荐的很棒的jQuery插件。

Stafan 2020.03.23

这是最近的CSS技巧文章，对此进行了讨论。

以上文章中的一些解决方案（此处未提及）是

1）-webkit-line-clamp和2）将绝对定位的元素放到右下角，并逐渐消失

两种方法都采用以下标记：

<div class="module"> /* Add line-clamp/fade class here*/
  <p>Text here</p>
</div>

与CSS

.module {
  width: 250px;
  overflow: hidden;
}

1）-webkit-line-clamp

线夹FIDDLE（..最多3条线）

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  max-height: 3.6em; /* I needed this to get it to work */
}

2）淡出

假设您将line-height设置为1.2em。如果要显示三行文本，我们可以将容器的高度设为3.6em（1.2em×3）。隐藏的溢出将隐藏其余部分。

淡出FIDDLE

p
{
    margin:0;padding:0;
}
.module {
  width: 250px;
  overflow: hidden;
  border: 1px solid green;
  margin: 10px;
}

.fade {
  position: relative;
  height: 3.6em; /* exactly three lines */
}
.fade:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 1.2em;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

解决方案＃3-使用@supports的组合

我们可以使用@supports在webkit浏览器上应用webkit的换行，并在其他浏览器中应用淡出。

@支持带有淡入淡出小提琴的线夹

<div class="module line-clamp">
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

的CSS

.module {
  width: 250px;
  overflow: hidden;
  border: 1px solid green;
  margin: 10px;
}

.line-clamp {
      position: relative;
      height: 3.6em; /* exactly three lines */
    }
.line-clamp:after {
      content: "";
      text-align: right;
      position: absolute;
      bottom: 0;
      right: 0;
      width: 70%;
      height: 1.2em;
      background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
 }

@supports (-webkit-line-clamp: 3) {
    .line-clamp {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;  
        max-height:3.6em; /* I needed this to get it to work */
        height: auto;
    }
    .line-clamp:after {
        display: none;
    }
}

小卤蛋 2020.03.23

很好的问题...我希望有个答案，但这是您最近使用CSS可获得的最接近的答案。没有省略号，但仍然相当有用。

overflow: hidden;
line-height: 1.2em;
height: 3.6em;      // 3 lines * line-height

樱小胖Mandy 2020.03.23

在查看了W3规范的文本溢出之后，我认为仅使用CSS是不可能的。省略号是一种新颖的属性，因此到目前为止，它可能尚未收到太多使用或反馈。

但是，这个人似乎提出了类似（或相同）的问题，并且有人能够提出一个不错的jQuery解决方案。您可以在此处演示解决方案：http : //jsfiddle.net/MPkSF/

如果无法使用javascript，我认为您可能不走运。

樱小胖Mandy 2020.03.23

也有几个jquery插件可以解决此问题，但是许多插件不能处理多行文本。以下作品：

还有一些性能测试。

相似问题

基于react18+vite4+zustand网页端仿微信聊天实例

0 回答

基于tauri+vite4+pinia跨端后台管理系统应用

0 回答

HTML5 Drag与Drop 拖动时更改图标/光标

5 回答

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

25 回答

基于tauri+vue3跨端聊天应用|tauri仿微信模板

0 回答

Ace Editor一款比较好用的展示代码组件

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android

getRowRects

浮动 ...more

检测窗口大小调整或元素更改

的HTML

的CSS

工作小提琴（调整窗口大小以进行检查）

链接到我的博客以获取解释

更新的小提琴

1）-webkit-line-clamp

2）淡出

解决方案＃3-使用@supports的组合

的CSS

浮动 `...more`