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

Question

我有一个容器,文本可以扩展为两行,高度为40px,字体大小为18px.当我做:

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

然后虚线显示正确但它在一条线上被切断.当我做的时候:

text-overflow: ellipsis;

然后它正确地显示了2行,但最后没有"......".我如何实现这一点,以便它在第二行正确地使用两行和"......"？

Answer 1

您可以使用-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;

}

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

小提琴

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

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