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:
- Set the line-height to whatever you like.
- Set the height to a multiple of the line-height.
- Set the overflow to hidden.
- Add the ellipsis to the after pseudo-element and set its background color to that of the paragraph's background color.
Related Topics
Css: How Is Height of Block-Elements Calculated
How to Do Text-Overflow: Ellipsis on Two Lines
How to Load CSS Rules Dynamically in Webkit (Safari/Chrome)
Confused by CSS Pseudo-Class :Active
What Happens When the Browser Doesn't Support a CSS Pseudo-Class
Set the Width of Select2 Input (Through Angular-Ui Directive)
Reducing the Gap Between a Bullet and Text in a List Item
How to Put a Div in Center of Browser Using CSS
Use Variable Defined in Config.Rb in SCSS Files
Clip-Path on Chrome Leaves a Strange Line on the Edge
404 Errors on Bundled Jquery CSS, VS2012 Publishing to Azure
Concatenate String in Less in Loop
Ie11 Making Background Image Text Blurry
Internet Explorer and Safari Mobile CSS Filter Invert
Remove Underline from Part of a Link
CSS Flex, How to Display One Item on First Line and Two on the Next Line