I have a text that needs to be truncated in some defined length (say 14) and I want to add an ellipses to the end of the truncated text.
Example Output:
Some text here...
Can this be done in CSS?
1 Answer
Css dont know the number of characters. It only knows box model. In a project i had worked on elipses with css but it is worst idea. For a better approach use javacript.
5 Comments
Marcos Pérez Gude
In the real world, it's exactly the opposite. Is better to use CSS for this purpose, not count the characters of an string (each character is different size / weight than others)
John Roca
@Tahir Thank you for your answer. But I was looking for a CSS Solution.
John Roca
@MarcosPérezGude I agree with your idea that CSS is better to use rather than using JS for adding ellipses on a truncated String.
Tahir Shahzad
For using css approach you cannot count characters
John Roca
@TahirShahzad I was not able to count the characters Yes. But the container has its own width so I thought counting the character would suffice. Anyways. My Question was answered. Thank you for your answer.
@mixin ellipsisMe { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .selector { @include ellipsisMe; }