在第 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 ）。