HTML/CSS “Responsive Truncation”
-
27-10-2019 - |
문제
I recently launched a responsive version of my site, however I'm finding that percentage width divisions containing a number of single lines of text look really bad, as fitting everything on a single line in both the desktop and mobile views results in each single line of text being either too long or too short.
My markup is a single unordered list of links (with long anchor texts) - does anyone have any suggestions to truncate the anchor text according to the width of the containing division?
해결책
I can come up with two options:
One is to do it yourself using javascript as described here:
Calculate text width with JavaScript
I don't think there is any way to determine the width of the text until the browser actually renders the text.
Make sure you don't display: none it, or the browser won't actually render it and you can't determine the width.
The second is to let CSS do it for you; it's easier, but you lose pretty much all flexibility:
If you're willing to let CSS guess at how to cut off your text into ellipsis, you can try text-overflow: ellipsis