Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Detecting line wrap and adding "..." to overflowed words

Reply
Thread Tools

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

 
 
Jason
Guest
Posts: n/a
 
      10-13-2006
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

 
Reply With Quote
 
 
 
 
jojo
Guest
Posts: n/a
 
      10-13-2006
Jason wrote:

> 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



 
Reply With Quote
 
 
 
 
Harlan Messinger
Guest
Posts: n/a
 
      10-13-2006
jojo wrote:
> Jason wrote:
>
>> 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)


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.
 
Reply With Quote
 
jojo
Guest
Posts: n/a
 
      10-14-2006
Harlan Messinger wrote:

>> 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.


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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
why dosent buffer gets overflowed raashid bhatt C Programming 11 08-26-2008 04:06 AM
ASP.NET "XSL processor stack has overflowed." Prabu ASP .Net 1 03-05-2007 08:23 AM
Detecting line wrap and adding "..." to overflowed words Jason Javascript 5 10-13-2006 09:44 PM
Wrap computer components in bubble wrap? Ickshka Computer Support 7 05-05-2006 05:54 PM
img overflowed by text Rafal 'Raf256' Maj HTML 10 11-19-2003 11:45 AM



Advertisments