在第 4 行末尾带有链接的线夹

Question

要求在第四行末尾显示“阅读更多”链接（下图）。

如果我使用线夹，它如下所示：

我尝试使用不同的方法，但存在单词无法正确分解的问题。

下面是代码：

 .container { width: 800px; position: relative; } .text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .read-more { position: absolute; bottom: 0; right: 0; background: white; } .read-more::before { content: '...'; display: inline; margin: 0 5px; }

 <div class="container"> <div class="text">This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is the issue with this approach</div> <div class="read-more"> <a href="">Read More ></a> </div> </div>

如果你能帮助解决这个问题，那将非常有帮助。 这是否可以使用 CSS 实现？ 提前致谢。

Answer 1

看看解决方案＃2在这篇文章。

片段：

/**Major Properties**/
overflow:hidden;
line-height: 2rem;
max-height: 8rem;
-webkit-box-orient: vertical;
display: block;
display: -webkit-box;
overflow: hidden !important;
text-overflow: ellipsis;
-webkit-line-clamp: 4;

文章引用了 Shan Shah 的 codepen 演示结果： https ://codepen.io/ShanShahOfficial/pen/wvBYwaB

您可能希望根据需要省略一些属性（例如line-height ）。