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

Discussion in 'HTML' started by Jason, Oct 13, 2006.

  1. Jason

    Jason Guest

    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
    Jason, Oct 13, 2006
    #1
    1. Advertising

  2. Jason

    jojo Guest

    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
    jojo, Oct 13, 2006
    #2
    1. Advertising

  3. 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.
    Harlan Messinger, Oct 13, 2006
    #3
  4. Jason

    jojo Guest

    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
    jojo, Oct 14, 2006
    #4
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Rafal 'Raf256' Maj

    img overflowed by text

    Rafal 'Raf256' Maj, Nov 19, 2003, in forum: HTML
    Replies:
    10
    Views:
    635
    Bertilo Wennergren
    Nov 19, 2003
  2. Prabu
    Replies:
    1
    Views:
    422
    Prabu
    Mar 5, 2007
  3. Aaron Fude

    To wrap or not to wrap?

    Aaron Fude, May 8, 2008, in forum: Java
    Replies:
    12
    Views:
    695
    Chronic Philharmonic
    May 10, 2008
  4. raashid bhatt

    why dosent buffer gets overflowed

    raashid bhatt, Aug 22, 2008, in forum: C Programming
    Replies:
    11
    Views:
    584
    cr88192
    Aug 26, 2008
  5. Jason
    Replies:
    5
    Views:
    95
    nutso fasst
    Oct 13, 2006
Loading...

Share This Page