Detecting line wrap and adding "..." to overflowed words

J

Jason

I have a div box with a border, and some padding left and right. It has
some text with different font sizes, and a few icons. I want to cut off
any overflow at the end of the line with "...", instead of the text
wrapping. What is the best way I can detect whether the line wrapped,
and how many characters to cut off at the end?

- Jason
 
J

jojo

Jason said:
I have a div box with a border, and some padding left and right. It has
some text with different font sizes, and a few icons. I want to cut off
any overflow at the end of the line with "...", instead of the text
wrapping. What is the best way I can detect whether the line wrapped,
and how many characters to cut off at the end?

You can use CSS for that:

overflow:hidden; (Hides the overflow)
text-overflow:ellipsis; (Displays "...")
white-space:nowrap; (Prevents the text from line-breaking. Don't know
wether it's neccessary or not)

I do not know wich browsers support "text-overflow" and I'm to lazy to
search for it at the moment. Just try it out or search for yourself.

HTH, jojo
 
H

Harlan Messinger

jojo said:
You can use CSS for that:

overflow:hidden; (Hides the overflow)
text-overflow:ellipsis; (Displays "...")
white-space:nowrap; (Prevents the text from line-breaking. Don't know
wether it's neccessary or not)

IE defines it but I can't get it to work there or in Firefox. W3C says
it's been suggested but it's one of a number of proposed properties they
haven't even evaluated for inclusion in the CSS 3 draft yet.
 
J

jojo

Harlan said:
IE defines it but I can't get it to work there or in Firefox. W3C says
it's been suggested but it's one of a number of proposed properties they
haven't even evaluated for inclusion in the CSS 3 draft yet.

perhaps you have to specify a width in addition. worked fine on a site I
had once (but don't ask me for the exact code I used, I do not remeber
it...). It worked well in IE. Firefox didn't display the ellipses, but
it cut the text right. Perhaps you could use :after and the
content-property to display the ellipses in CSS 2.1 compatiple browsers
like Firefox.

HTH, jojo
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,479
Members
44,899
Latest member
RodneyMcAu

Latest Threads

Top