Reputation: 19
My use case: I want to display a text, limiting it to the maximum number of lines to two and truncating it with ellipsis only when it doesnt fit in the two lines, but I want to preserve the last word. I have to do this with multiple paras in the page.
eg:
Lorem asa ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat te... volutpat.
Algorithm I was thinking of:
<div class="outter">
<div class="message" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.">
<div class="firstLine"></div>
<div class="secondLine" style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"></div><div class="lastWord"></div>
</div>
</div>
Point me if there is any other way.
Upvotes: 0
Views: 1032
Reputation:
Use .length to get the length of the string and a substring at that length and put an ellipsis there.
Check this if it works. Thanks!
Upvotes: 1