Not signed in (Sign In)

Vanilla 1.0.3 is a product of Lussumo. More Information: Documentation, Community Support.

CSS: WordWrapLongText problem in Firefox

Bottom of Page

1 to 5 of 5

  1.  
    •  
      CommentAuthorarif_iq
    • CommentTimeJun 7th 2007 edited
     
    Is there any alternative to wrap a longer word in Firefox?

    There is a fix for IE using "word-wrap: break-word".

    Here is the code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Wrapping issue</title>
    <style>
    .wrap {
    width: 10%;
    background: #F00;
    word-wrap: break-word; /*IE fix*/
    /*Looking for Firefox fix*/
    }
    </style>
    </head>
    <body>
    <div class="wrap">testOfTheLongestURLICouldThinkOfToMakeThisNotWrapAndCauseATableOrDivToOverflow</div>
    </body>
    </html>

    Any solution would be greatly appreciated.

    Thanks
    -Mohammed Arif
    • CommentAuthorlindsay
    • CommentTimeJun 7th 2007
     
    Hi,

    If you're able to change the content of the word (either hard coding or through a CMS), then you might be able to use a zero width space, or the <wbr> element.

    They both have problems in various browsers/fonts, so I'll point you to a couple of references:
    http://www.quirksmode.org/oddsandends/wbr.html
    http://www.thescripts.com/forum/thread154142.html
    •  
      CommentAuthorarif_iq
    • CommentTimeJun 7th 2007
     
    I don't have control to insert zero width space or <wbr>.

    All the contents comes from AJAX engine (Backbase) which takes care of user interface creation.

    I need some CSS based solution or some quick javascript fix.

    Thanks
    -Mohammed Arif
    •  
      CommentAuthorTyssen
    • CommentTimeJun 7th 2007
     
    The link text doesn't need to be the same as the full URL, so you could write a script to shorten it, e.g.:

    testOf....Overflow

    That's what most forums do, anyway.
    • CommentAuthordemonzmedia
    • CommentTimeSep 4th 2007 edited
     
    That is certainly a long word! One solution in this case might be to shorten the URL with the use of the mod-rewrite function in the .htaccess file. Otherwise use the organic link information that should really be embedded for accessibility, e.g. rather than -

    testOfTheLongestURLICouldThinkOfToMakeThisNotWra...
    use
    "Click here to see an example of a long no-wrap word"

    The element would also work fine, however it does not work in all browsers. As the first example provided by Linsay explains, the tag does not work in all browsers and has trouble with some popular fonts. Therefore I would opt for mod_rewrite to reduce any redundant information or using organic language to describe the link as opposed to the full url. See here
    for information on mod-rewrite.

    _____________
    Post by Demonz web design sydney

1 to 5 of 5

  1.