Cut off text in a div if it exceeds set width?
Something like this? http://www.quirksmode.org/css/textoverflow.html
Text-Overflow
The text-overflow declaration allows you to deal with clipped text: that is, text that does not fit into its box. The ellipsis value causes three periods to be appended to the text.
Comments
-
dannymcc almost 2 years
On a website I am working on users can add a heading to a section of a page.A simple example:
M11-001 - loss of container and goods from Manchester
With some headings the content can be quite in-depth. In reality, for the heading at least, this content isn't always needed. The first few words would suffice to differentiate between records.
I could just set overflow:hidden to the div and ruthlessly cut of anything outside of the set width.
I would prefer to add ... To the end. Like so:
M11-001 - loss of container...
So three full-stops would be added after either X width or X characters.
Is this possible with CSS, or maybe JavaScript?
-
pimvdb about 13 yearsAn advantage is that copied text does not include the
...
but rather the complete text. -
NakedBrunch about 13 yearsGreat. Is there anything else you need to mark this question as "answered"?
-
Graham T over 10 yearsAmazing! Had 5+ lines to handle this with substring and concatenations. Very smooth
-
Robin almost 5 yearsWork perfectly,
white-space: nowrap; overflow:hidden;text-overflow: ellipsis;
. -
daniel rubambura over 3 yearsFor multi-line text, sometimes you may need to cut off only last line exceeding text. I found a solution here for that particular case. medium.com/@elad/trimming-multi-lines-in-css-5ae59d5e6d84