截断文本并在CSS中添加省略号

Question

我试图截断一段文本并添加省略号以表示有更多内容.

我试图使用CSS属性text-overflow:ellipsis- 但是看一下它的例子似乎只能使用no-wrap它,因此它只能用于单行文本,因此不适合截断段落.

然后我想出了另一个解决方案,这几乎是正确的,但只有一个问题......

因此ellipsis,我没有使用属性截断,而是通过使用overflow:hidden和设置a 来截断旧方式max-height

.tourItem .tourInfo
{
max-height: 110px;
overflow: hidden;
display: block;
}

然后创建我使用的整齐省略号 :after

.tourItem .tourInfo:after {content:'...';}

这似乎是正确的方式,但我遇到了两个问题......

1. 在overflow:hidden该办法:after的内容不会显示.但它是必需的,因为它控制截断的文本!
2. 省略号(如果你取下它overflow:hidden)显示在文本部分的下方.我需要它看起来像它是文本行的一部分......

JS小提琴帮忙

Answer 1

你尝试过做这样的事情吗？

<div class="content-ovh">
   <p class="text">Your text</p>
   <a href="#">More</a>
</div>

以及风格：

.content-ovh .text{
    witdh: yoursize px;
    height: yoursize px;
    overflow:hidden;
}