Question

we are trying to limit the length of an html element using the width and overflow css rules. as an example:

div.hidetext { width: 100px; overflow: hidden; }

what we would like to do is add three dots ‘…’ at the end of the string IF the text has been hidden. If the text is short enough to do then the ‘…’ should not show up. my first thoughts is to use the :after pseudo-class but not sure how to make that conditional based on whether the text was hidden or not

i’m pretty sure this can be done with javascript/jquery by comparing the width of the text with the width of the html element containing it but i would prefer a css solution.

any thoughts on how this could be achieved?

Answer 1

text-overflow: ellipsis in browsers supporting that part of the draft specification.