0

Since Webkit-line-clamp works only with chrome I am trying to achieve same functionality which works in all browsers.

If there is more than 4 lines I am hiding remaining content and adding ellipsis but the problem is if there is less than 4 lines then also ellipsis is coming and its taking 4 lines height. I want it only if there is more than 4 lines

.line-clamp
{
 display            : block;
 display            : -webkit-box;
 -webkit-box-orient : vertical;
 position           : relative;

 line-height        : 1.2;
 overflow           : hidden;
 text-overflow      : ellipsis;
 padding            : 0 !important;
}
.line-clamp:after
{
 content    : '...';
 text-align : right;
 bottom     : 0;
 right      : 0;
 width      : 25%;
 display    : block;
 position   : absolute;
 height     : calc(1em * 1.2);
 background : linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 75%);
}

.line-clamp-4
{
 height             : calc(1em * 1.2 * 4);
}
 <p id="FirstDiv" class="line-clamp line-clamp-4">This is a cross-browser (pure CSS) solution that will clamp text to X number of lines with a trailing ellipsis in Webkit browsers. The `height` property is used on other browsers (along with a fading text effect) as a graceful fallback in non-Webkit browsers. The use of CSS `calc` allows for any font-size to work properly; i.e. you don't need a fixed height or a fixed font size for this to work! Play with it :-) You can change the second class to `line-clamp-[1|2|3|4|5]` and experiment with this just a little.</p>

<br>
<br>
 <p id="SecondDiv"  class="line-clamp line-clamp-4">This is a cross-browser (pure CSS)</p>
<br>

Anything I can do with this code or is there any way to achieve this which will work like line-clamp in all browsers?

IamGrooot
  • 940
  • 1
  • 17
  • 44
  • Possible duplicate of [Limit text length to n lines using CSS](https://stackoverflow.com/questions/3922739/limit-text-length-to-n-lines-using-css) – chazsolo Mar 07 '18 at 13:32
  • @chazsolo There also same issue is there. If number of lines is always more than the height what we are specifying it works fine. Problem is when its less than that – IamGrooot Mar 07 '18 at 13:45

0 Answers0