SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    word-wrap: break-word

    Hi. Read an article on PIE about the expanding box problem in IE. Now I made a site (fluid) which is like a basic HTML and CSS tutorial, which has many <code> tags, and some of these tags contain words which are long, for example:

    <img src="http://www.google.com.au/intl/en_au/images/logo.gif">

    So i was testing the site in carious resolutions, and some bits of code such as the previous are two long when i used 800 x 600.

    Anyway, PIE recommened using:
    overflow: hidden or word-wrap: break-word (an IE only CSS style)
    Now overflow: hidden did not work in my case, but word-wrap: break word, works perfectly. So now IE will break words will firefox will let it overflow. But is there a way to make firefox break the words as well?

    If not, atleast fixing IE is great, however word-wrap: break-word, does not validate CSS. Should that matter to me?

    Thanks

    Edit: perhaps I could give the div a min-height in ems? so that the problem never occurs in the first place? Or put a scroll bar on the code...

  2. #2
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Acually, ive decided to get with over-flow: auto, and min-width. Its seems much better than work breaking.

    :-)

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,545
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    word-wrap was proprietary IE code but is now scheduled for CSS3 so other browsers will take it up eventually. It is the only method to break unbroken text at the boundaries of an element.

    You can use overflow;hidden but that results in the part of the element that is out of bounds being hidden which isn't usually a good option (especially if its an important url).

    Browsers like Firefox will let the contents spill out if they are too long but won't break the layout (but the text may overlap). The problem with IE is that it will stretch the container to fit the text and throw the rest of the layout out completely. In these cases its safer to use word-wrap for IE.

    You could of course use overflow:scroll (or auto) but that result in nasty scrollbars appearing which most people don't like but can be a solution.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •