SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Nov 2004
    Location
    Wash DC
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face Word-Wrap in <select> or <option> tags not working

    Hi! First time poster here. I did a bit of searching for this problem, as it would seem to be an issue someplace out there, but didn't find anything specific. So here goes I need to display some VERY long strings of text (titles) within pull-down and scroll form elements on a data entry screen. This WORKS in Netscape by applying the white-space:normal style to the <select> tag, and the long text wraps within the drop-down form element. Unfortunately IE just truncates the long title to the width of the form element. It would seem that word-wrap should work. MSDN site states that the word-wrap style can be applied to either the <select> or <option> element, but I've yet to see it work.

    HTML Code:
    <html>
    <body>
    <table style="width:400px; height:200px;">
    <tr>
    <td style="width:50%">
    <select style="word-wrap:break-word;width:100%;">
    <option>An very large and seemingly endless title that needs to be nested in a much smaller space on the screen than can possibly be accomplished with my limited skills</option>
    <option>Second Title</option>
    <option>Thrid Title</option>
    </select>
    </td>
    <td style="width:50%">
    <select style="word-wrap:break-word;width:100%;">
    <option>Short Title</option>
    <option>Short Title</option>
    <option>Short Title</option>
    </select>
    </td>
    </tr>
    </table>
    </body>
    </html>
    Okay not the greatest html, but I hope you get the idea of what I'm trying to do. Anyone ran up against this or have any ideas?

    Thanks!

    John
    Last edited by John King; Nov 23, 2004 at 10:45. Reason: Omg the orginal HTML was worse than it is now!

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's no 'word-wrap' property in CSS (unless it's a Microsoft-specific extension). Do you by any chance mean 'white-space'? IIRC, Microsoft has some proprietary properties for that, but CSS 2.1 only allows normal, pre, nowrap, pre-wrap and pre-line.

    I think IE relies heavily on Windows components when rendering form controls, especially <select> elements. Styling these are notoriously difficult.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Member
    Join Date
    Nov 2004
    Location
    Wash DC
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's definately Microsoft specific, just wondering if anyone had found a way to make larger than the form elements within the <option> tag wrap...

    John

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    I couldn't see a way to do this by any normal means.

    Perhaps you may need to re-think the design

  5. #5
    SitePoint Addict
    Join Date
    Dec 2008
    Location
    Brussels
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried already with <br /> tags in the <option> tag...

    HTML Code:
    <option>An very large<br />
    and seemingly endless <br />
    title that needs to be nested <br />
    in a much smaller space on the<br /> 
    screen than can possibly be<br /> 
    accomplished with my limited skills</option>
    <option>Short Title</option>
    <option>Short Title</option>
    But still, doesn't work.
    I can CSS the width of the dropdown menu.... but not to break the lines of text.

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bulevardi View Post
    I tried already with <br /> tags in the <option> tag...
    That's invalid. An <option> tag can only contain text (including entity references and numeric character references). It can't contain any HTML markup.
    Birnam wood is come to Dunsinane

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    You can't put breaks in the option element as it is not valid and won't work anyway.

    You would need to script this function if you must have it.

    http://vinoth-kumar.webs.com/javascript.htm
    http://web-development.tuljo.com/sel...tion-line-wrap


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
  •