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

问题描述

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

I have a container where the text may expand to two lines and it's 40px in height, with an 18px font size. When I do:

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

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

Then the dotted line shows correctly but it gets cut off on one line. When I do just the:

text-overflow: ellipsis;

然后正确显示两行，但末尾没有"...".如何实现此目的，以便它正确使用两行并在第二行以"..."结尾?

Then it correctly shows the 2 lines but there's no "..." at the end. How do I achieve this so it correctly uses both lines AND finishes with "..." on the second line?

推荐答案

向容器中添加span，该容器将容纳文本:

Add a span to the container, which will hold the text:

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

小提琴

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

Resize the container, and you'll see that the ellipsis displays only as necessary.

应该在所有现代浏览器中都可以使用.

Should work in all modern browsers.

这篇关于如何进行文本溢出:两行省略号?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！