SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru
    Join Date
    Feb 2008
    Posts
    655
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wrapping mid-word using CSS

    Is there a way using CSS to force a string to wrap onto a new line mid-word when it reaches the edge of a container.

    It sounds pretty simple in theory but I can't find any way to do this.

    Thanks

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    word-wrap: break-word;

    I don't think it's actually an official part of CSS so it might not work everywhere, but it seems to be pretty well supported by most browsers.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Yes word-break:break-word is part of cSS3 and has been implemented in IE since about IE5 IIRC.

    The latest webkit, Firefox and opera all support it now.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    div {
        width:300px;
        background:#f9f9f9;
        word-wrap:break-word;
    }
    </style>
    </head>
    <body>
    <div>lkdjlkkkdkjlkdjpuoiehndnlknlkmdljomllkjkdjdijijddkgeubrbnrkrkmnrmnrmmrmrmfhkhhohhoihoihgjhftytm</div>
    </body>
    </html>

    In tables IE usually needs a wrapper in the table-cell to have the word wrap applied to and Firefox needs the table to be table-layout:fixed.

  4. #4
    SitePoint Guru
    Join Date
    Feb 2008
    Posts
    655
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot for the help. That's exactly what I needed.


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
  •