|
|
|
|
|
|
by DougWebb
5480 days ago
|
|
|
I imagine it's simply complex. Part of the box model involves expanding containers to fit the content within them, and properties like float, overflow, width, and height run counter to that. So what do you do with "expand this div to fit the text it contains, but also allow the text to be truncated if it doesn't fit, and remember to leave room for the ellipses"? When you get into fancier concepts like truncating a set of lines, or only at certain word/phrase/sentence boundaries, you're into desktop publishing typesetting. To do that properly you're not just truncating when the container overflows, you're also adjusting the spacing between words and letters to make every line look consistent and to get as much of the text to fit neatly as you can. There aren't many pieces of software that professionals trust to do that well, and the ones that exist are expensive. We're not likely to see those algorithms getting into everyone's browser. |
|
|
As long as the container is at least wide enough for one ellipses you shouldn't need to leave room: once you've decided where to place all the text, where an ellipses is needed overwrite the area with what would otherwise be the background and add the dots.
Though I suppose that might not be desirable as it would result in partial characters. A little more hassle (but not much) would be to work back until the end of the next whole character.
But other than that you are right: the difficulty won't be rendering the ellipsis it will be in deciding what to do when the (implicit or explicit, and quite possibly deeply nested) "make this all fit if you can" and "truncate this if you need to" directives overlap - that could get quite hairy, if you want to get something that looks nice for most conceivable combinations.