Is it possible to use line-clamp without displaying an ellipsis

Question

All examples I've seen that use the -webkit-line-clamp property result in an ellipsis being shown at the end of the last line. Is it possible to replace that ... with something else or remove it all together?

Answer 1

You can create a custom font face using any existing font and apply it to that text region to either hide the ellipsis completely, as is demonstrated in the snippet below, or change it to something else (following the idea in the comments of the snippet).

The main drawback is that any ellipsis characters appearing in the body of your text will get hidden/modified as well, so be sure you aren't expecting any in there, or work around it with a search and replace of … ->... in your logic.

 @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>