Is there a way to define a text box in terms of height and width so that an ellipsis with three dots only appears when the text fills the entire text box? Currently, the text is being truncated only based on the width of the text box, even though theoretically, it could wrap to the next line if there’s enough space. There must be a solution for this, right?
Hi,
internally we are using these two css properties
(and you also need an overflow hidden)
The nowrap make it one online, while ellipsis add the “…”. Sadly ellipsis will not work without the first one.
There is some experimental browser properties like line-clamp webkit to support this, but the result is not guaranted, and force you to know the exact number of line.
Maybe you can try to cut the text length yourself if you know approximately how many caracters your div can handle
To build on @aurelie’s insightful reply, here’s a useful article on webkit-line-clamp, which works pretty well in modern browsers: How to Apply an Ellipsis to Multiline Text in CSS ? - GeeksforGeeks
The trick as she says is getting the line count. One can estimate by using the known pixel size of the text and comparing with the height of the div. This will probably call for variable that stores the current line count (and can then drive the CSS property dynamically) and then a workflow that updates that line count based on the height of the containing rectangle whenever the latter changes (e.g. whatever event would cause that to change: window resize, data changing, etc).
I’ve done this in other circumstances enough to say that it’s a little involved, but workable with a little patience and elbow grease.
Hey! Thanks for posting your efforts here.
Would you be willing to walk me through how to utilize this code?
Really owe it to you for putting in the research here! It’s critical for my use case so I’m really hopeful that I found a free solution. Take care.
You rock! Thank you so much for this – huge gamechanger for my app. Much appreciated!