如何在两行文本上实现text-overflow: ellipsis？

Question

我有一个容器，文本可能会扩展到两行，并且高度为40px，字体大小为18px。当我这样做：

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

然后虚线会正确显示，但会被截断在一行上。当我只做如下操作时：

text-overflow: ellipsis;

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

- user1227914

---

空格在某些情况下很有用 http://codepen.io/gc-nomade/pen/bNxBxE br 或 pre - G-Cyrillus

请查看我发布的答案和 CodePen 链接：http://codepen.io/anon/pen/pJQpWo - VamsiKaja

可能是CSS：两行文本溢出省略号，是否可能的重复？ - areim

可能是[如果内容太宽，将省略号（...）插入HTML标记]的重复问题（https://dev59.com/vXRB5IYBdhLWcg3wuZU1）。 - gfullam

这个问题提供了多行省略号支持的解决方案：https://dev59.com/vXRB5IYBdhLWcg3wuZU1#I7rmnYgBc1ULPQZFdUnc - gfullam

显示：-webkit-box; -webkit-box-orient: 垂直; -webkit-line-clamp: 2;这是最好的方法。 - anandharshan

Answer 1

你可以使用-webkit-line-clamp来实现。但是需要一种hack方法。您需要设置div的高度，以便它只能容纳两行文本。

请参阅此代码片段：https://codepen.io/VamsiKaja/pen/xYZVzY HTML文件：

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

- VamsiKaja

Answer 2

在容器中添加一个 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

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

适用于所有现代浏览器。

- Rick Hitchcock

---

背景：白色可以变成背景：透明。此外，不错的解决方案，伙计。 - Tom

@Tom，谢谢。我认为你需要指定一个背景颜色。否则，省略号可能会不必要地显示出来。请参见http://jsfiddle.net/j7863uw5/44/中的第一个div。 - Rick Hitchcock

这不仅取决于宽度吗？ - Ulises CT

抱歉，@UlisesCT，我不确定我理解你的问题？ - Rick Hitchcock

Answer 3

以下解决方案对我有效。

.cell {
  display: -webkit-box;
  overflow: hidden;
  text-align: center;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

- irfan shaikh

Answer 4

只是想发表我的意见。最接近的纯CSS解决方案是-webkit-line-clamp方法，但仅限于Webkit浏览器，并且是旧的flexbox实现的残留物（可能会在将来被删除）。

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

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

1. 适用于所有主要浏览器
2. 没有css变通方法、黑客或涉及javascript
3. 向用户传达文本被截断的信息，但如果他们希望，可以选择通过滚动查看它-而且，用户已经习惯了垂直滚动条

这是一个文本框的示例代码：

.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值获取它。

- puiu

Answer 5

一种基于纯CSS的方法，使用-webkit-line-clamp属性：

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

- Defims