Clamping Lines Without '-Webkit-Line-Clamp'

webkit-line-clamp does not work on Chrome unless I make some unrelated CSS change in developer tools

As per a comment from Andyweb, the solution posted at css - multi line line-clamp (ellipsis) doesn't work is something that works for me.

Why webkit line clamping does not work in firefox?

Important Update:

As of Firefox version 68 Firefox supports -webkit-line-clamp!!

Demo snippet (caniuse)

p {

width: 300px;

border: 2px solid green;

padding: 0.5em 0.5em 0 0.5em;

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3; /* number of lines to show */

}
<p>When the CSS -webkit-line-clamp property is applied to a block of text (e.g., a paragraph), the text is limited to the specified number of lines (1 or more), and an ellipsis character (…) is added to the end of the last visible line. - see <a href="https://webplatform.news/issues/2019-05-17">webplatform.news</a>

Why Line Clamp is not working with text align justify

The solution you're trying to use is a very old technique. It uses an old version of display: flex;, and should be avoided.

You can use the JavaScript technique, clamp.js, but I've also created this pure CSS version: http://codepen.io/n3ptun3/pen/meYKgZ?editors=110

CSS

p {
position: relative;
width: 400px;
height: 120px;
line-height: 30px;
margin: 0px;
padding: 0px;
overflow: hidden;
text-align: justify;
}

p::after {
content: "...";
background-color: #fff;
height: 30px;
width: 20px;
position: absolute;
bottom: 0;
right: 0;
}

Of course this only works on a solid background, but most of the time that'll be the case with body text.

Here are the main points:

  1. Set the line-height to whatever you like.
  2. Set the height to a multiple of the line-height.
  3. Set the overflow to hidden.
  4. Add the ellipsis to the after pseudo-element and set its background color to that of the paragraph's background color.


Related Topics



Leave a reply



Submit