I am using line clamp to truncates text at a specific number of lines. for example clamp for 3 lines.my code is working properly on chrome, but on firefox the text is not truncating propelry as this div which having class name as description having two elements one is paragraph and another is unordered list items. so on firefox it is truncating the child element text instead of parent element text (considering it as different two elemets)for reference see this image Result on firefox,On chrome tuncate properly text in 3 lines as example It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more a normal distribution...
.description{
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="description">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more a normal distribution about df</p>
<ul>
<li>Why resilience is the The point of using Lorem Ipsum is that it has a more a normal distribution</li>
<li>How helping others helped her develop the confidence to overcome setbacks</li>
<li>Changing hrer lorem set lump to not allow sum to feel like a post more</li>
</ul><br>
</div>
gone through this https://css-tricks.com/almanac/properties/l/line-clamp/ but still the text is not truncate properly on firefox for reference see this jsfiddle attached here on chrome and firefox both and the code given clamp multiple lines