是否可以在不顯示省略號的情況下使用線鉗

Question

我見過的所有使用-webkit-line-clamp屬性的示例都會在最后一行的末尾顯示一個省略號。 是否可以用其他...替換它或將其全部刪除？

Answer 1

您可以使用任何現有字體創建自定義字體並將其應用於該文本區域以完全隱藏省略號，如下面的代碼片段所示，或將其更改為其他內容（遵循代碼片段注釋中的想法） .

主要缺點是出現在文本正文中的任何省略號字符也會被隱藏/修改，因此請確保您不希望出現任何省略號字符，或者通過搜索和替換… ->...來解決它。 … ->...在你的邏輯中。

 @font-face { font-family: "ellipsis-font"; src: local("Courier"); /* * The unicode for ellipsis ("…"). * Makes it so this font face only gets applied to that single character */ unicode-range: U+2026; /* Make it small to the point of being invisible */ size-adjust: 0%; /* * You could also create a custom font with a different * glyph corresponding to the ellipsis character, so you * could use a custom character instead of just hiding it. */ }.my-container { /* Standard line clamp CSS */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; width: 180px; /* * Putting our custom font in the front ensures * it handles the ellipsis display, the second font * in line should handle everything else */ font-family: ellipsis-font, 'Times New Roman', serif; }

 <div class="my-container"> This is…………………………………………………… <.-- Note how any ellipses in the main text also get hidden. That's one drawback --> some lengthy text that is bound to get abruptly cut off by overflow </div>