如何进行文本溢出：两行省略号？

Posted 2023-03-31

【中文标题】如何进行文本溢出：两行省略号？

【英文标题】：How can I do text-overflow: ellipsis on two lines?

【发布时间】：2015-10-20 07:31:54

【问题描述】：

我有一个容器，其中文本可以扩展到两行，高度为 40 像素，字体大小为 18 像素。当我这样做时：

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

然后虚线显示正确，但它在一条线上被切断。当我这样做时：

text-overflow: ellipsis;

然后它正确显示了 2 行，但最后没有“...”。我该如何实现这一点，以便它正确使用两行并在第二行以“...”结尾？

【问题讨论】：

空白在某些情况下会有所帮助 codepen.io/gc-nomade/pen/bNxBxE br 或 pre

查看我发布的答案和代码笔链接codepen.io/anon/pen/pJQpWo

CSS: Text overflow ellipsis on two lines, is it possible?的可能重复

Insert ellipsis (...) into html tag if content too wide的可能重复

显示：-webkit-box； -webkit-box-orient：垂直； -webkit-line-clamp：2；是最好的方法。

【参考方案1】：

在容器中添加一个span，它将保存文本：

<div class="container">
  <span>text...</span>
</span>

添加这个 CSS：

.container 
   overflow: hidden;
   position: relative;
   background: white;   //or other color


.container:after 
  content: '...';       //the ellipsis
  position: absolute;   //positioned in bottom-right
  bottom: 0;            //...
  right: 0;             //...
  padding: 0 0.3em;     //give some separation from text
  background: inherit;  //same color as container


.container span:after 
  content: '\0000a0';   //a space
  position: absolute;   //to cover up ellipsis if needed
  width: 1000px;        //...
  z-index: 1;           //...
  background: white;    //must match container's color.  can't use inherit here.

Fiddle

调整容器大小，您会看到省略号仅在必要时显示。

应该适用于所有现代浏览器。

【讨论】：

背景：白色可以变成背景：透明。此外，很好的解决方案，伙计。

@Tom，谢谢。我认为您需要指定背景颜色。否则，省略号可能会不必要地显示。请参阅jsfiddle.net/j7863uw5/44 的第一个 div。

这不只取决于宽度吗？

抱歉，@UlisesCT，不确定我是否理解您的问题？

【参考方案2】：

您可以使用-webkit-line-clamp 完成此操作。但是需要破解。您需要设置 div 的高度，使其只能容纳两行。

查看此代码笔https://codepen.io/VamsiKaja/pen/xYZVzY

HTML 文件：

<p class="">Pellentesque habitant morbi tristique senectus et netus et </p>

CSS 文件：

p 
    width:250px;  
    font-size:20px;
    margin:1em;
    height:50px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;

【参考方案3】：

只想加我的两分钱。最接近的纯 CSS 解决方案是 -webkit-line-clamp 方法，但仅限于 webkit 浏览器，并且是旧的 flexbox 实现的残余（将来可能会被删除）。

也许您应该重新考虑是否真的需要在垂直溢出的文本上使用省略号。

我建议改为使用可滚动的文本框。由于以下三个原因，我认为这是最好的解决方案：

适用于所有主流浏览器 不涉及 css 变通办法、hack 或 javascript 可以很好地与用户沟通文本被截断，但如果他们愿意，他们可以选择滚动浏览它 - 另外，用户已经习惯了垂直滚动条

这是文本框的示例代码：

.element 
  display: inline-block;
  height: 200px;
  overflow-y: auto;

  /* this is to preserve text containing new lines */
  white-space: pre-line;

如果我不得不选择，我会使用类似于Succint 的javascript 解决方案，它会在一定数量之后删除单词并在末尾附加一个...。如果您使用 React，这非常棒，因为您可以将组件内部所需的所有代码实现为函数，并且如果您需要原始文本，您仍然可以将其作为 props 值。

【参考方案4】：

基于-webkit-line-clamp的纯css方法：

@-webkit-keyframes ellipsis /*for test*/
    0%  width: 622px 
    50%  width: 311px 
    100%  width: 622px 

.ellipsis 
    max-height: 40px;/* h*n */
    overflow: hidden;
    background: #eee;

    -webkit-animation: ellipsis ease 5s infinite;/*for test*/
    /**
    overflow: visible;
    /**/

.ellipsis .content 
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    font-size: 50px;/* w */
    line-height: 20px;/* line-height h */
    color: transparent;
    -webkit-line-clamp: 2;/* max row number n */
    vertical-align: top;

.ellipsis .text 
    display: inline;
    vertical-align: top;
    font-size: 14px;
    color: #000;

.ellipsis .overlay 
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /**
    overflow: visible;
    left: 0;
    background: rgba(0,0,0,.5);
    /**/

.ellipsis .overlay:before 
    content: "";
    display: block;
    float: left;
    width: 50%;
    height: 100%;

    /**
    background: lightgreen;
    /**/

.ellipsis .placeholder 
    float: left;
    width: 50%;
    height: 40px;/* h*n */

    /**
    background: lightblue;
    /**/

.ellipsis .more 
    position: relative;
    top: -20px;/* -h */
    left: -50px;/* -w */
    float: left;
    color: #000;
    width: 50px;/* width of the .more w */
    height: 20px;/* h */
    font-size: 14px;

    /**
    top: 0;
    left: 0;
    background: orange;
    /**/

<div class='ellipsis'>
    <div class='content'>
        <div class='text'>text text text text text text text text text text text text text text text text text text text text text </div>
        <div class='overlay'>
            <div class='placeholder'></div>
            <div class='more'>...more</div>
        </div>
    </div>
</div>