How can I allow text to wrap inside a word if necessary?
I am looking for the best solution to allow text to wrap in the middle of a word if necessary. By best, I mean most browser-compatible, and will favor word breaks before it
-
You may want to check the
word-wrap: break-wordCSS property.The following example works in Google Chrome 4.0, Firefox 3.5.7, Safari 4.0.4, and IE 8:
<html> <body> <div style="word-wrap: break-word; width: 50px;"> Loremipsumdolorsitametconsectetueradipiscingelitselaoreetdoloremagnaaliq </div> </body> </html>Unfortunately as noted by BalusC in a comment to one of the answers, the above will not work in versions of Firefox older than 3.5. Since the population of users using old Firefox versions seems to be below ~6%, as noted by T.J. Crowder, you may want to fallback to an
overflow: scrollfor browsers that do not supportword-wrap. It may not look very nice, but if you are not expecting many words to be longer than the allocated space, the probability that one of the users will see the scroll bar would be very low, and it will get even lower as time passes and users upgrade their browsers. At least you would be failing gracefully in those situations.讨论(0) -
In the past, I have used something like this, (which did not work on Safari at the time, IIRC, but that was several years ago):
A<wbr>V<wbr>e<wbr>r<wbr>y<wbr>L<wbr>o<wbr>n<wbr>g<wbr>W<wbr>o<wbr>r<wbr>d A<wbr>n<wbr>d<wbr>A<wbr>n<wbr>o<wbr>t<wbr>h<wbr>e<wbr>r<wbr>W<wbr>o<wbr>r<wbr>d(I would generate this dynamically so that the person doing layout would not have to look at such an atrocity.)
讨论(0) -
Enter keyboard line break at the point at which you want it to break.
eg.
Thisisaverylongword
would become
Thisisavery longword
讨论(0) -
The css property
word-wrap: break-wordwill force long words to wrap to the next line if they are too long for their container. This is supported by IE (going way back), Firefox and Safari.Edit: Looks like you may be able to achieve this in older versions of Firefox as well using
white-space: -moz-pre-wrapandwhite-space: pre-wrap. See here for more info. I have not tested this with older versions of Firefox though.讨论(0) -
[Edit: OP updated his question to say this is specifically for user-generated content; the below won't (easily) work for that (you'd have to have your own hyphenation dictionary). Leaving it here, though, in case someone finds this question and needs an HTML option for doing this.]
You can use a soft hyphen (aka optional hyphen;
­or­). It was defined way back in HTML4. I've never used it, but I just tried and it works in: IE6, IE7, Chrome 4, FF 3.6, and Safari 4 for Windows at least.One could argue that the user-agent (browser) should handle this automatically (using a hyphenation dictionary for the language the document is in).
In practice, I don't know of a single web browser that does it automatically.Apparently, modern browsers do if you tell them they can; see wsanville's answer for a CSS option.讨论(0) -
Since there is no definitive answer (depends on your needs, e.g., do you want hyphens, what browsers must you support?), I did some research via Adobe BrowserLab to find out what the options are:
If you do not need hyphens, you will get best compatibility using
<wbr>. If you require hyphens, then using­is your best bet, but note that this will not work (wrap at char) in Firefox 2.0 Mac/Windows, or Safari 3.0.And, note that if you choose to not handle long words at all by using overflow, scroll or allowing wrap at a character, both IE6 and IE7 will respond by expanding the container width (at least with the
DIVI used), so beware.Results:
Browser Method Wraps at char Adds Hyphens Overflows horizontally Container expands horizontally ---------------------------------------------------------------------------------------------------------------------------------------------- Firefox 3.0 - Windows XP None No No Yes No Firefox 3.0 - Windows XP <wbr> Yes No No No Firefox 3.0 - Windows XP ­ or ­ Yes Yes No No Firefox 3.0 - Windows XP word-wrap: break-word No No Yes No IE7 - Windows XP None No No No Yes IE7 - Windows XP <wbr> Yes No No No IE7 - Windows XP ­ or ­ Yes Yes No No IE7 - Windows XP word-wrap: break-word Yes No No No Firefox 3.0 - OS X None No No Yes No Firefox 3.0 - OS X <wbr> Yes No No No Firefox 3.0 - OS X ­ or ­ Yes Yes No No Firefox 3.0 - OS X word-wrap: break-word No No Yes No Safari 3.0 - OS X None No No Yes No Safari 3.0 - OS X <wbr> Yes No No No Safari 3.0 - OS X ­ or ­ No No No No Safari 3.0 - OS X word-wrap: break-word Yes No No No Chrome 3.0 - Windows XP None No No Yes No Chrome 3.0 - Windows XP <wbr> Yes No No No Chrome 3.0 - Windows XP ­ or ­ Yes Yes No No Chrome 3.0 - Windows XP word-wrap: break-word Yes No No No Firefox 2.0 - OS X None No No Yes No Firefox 2.0 - OS X <wbr> Yes No No No Firefox 2.0 - OS X ­ or ­ No No Yes No Firefox 2.0 - OS X word-wrap: break-word No No Yes No Firefox 2.0 - Windows XP None No No Yes No Firefox 2.0 - Windows XP <wbr> Yes No No No Firefox 2.0 - Windows XP ­ or ­ No No Yes No Firefox 2.0 - Windows XP word-wrap: break-word No No Yes No Firefox 3.5 - Windows XP None No No Yes No Firefox 3.5 - Windows XP <wbr> Yes No No No Firefox 3.5 - Windows XP ­ or ­ Yes Yes No No Firefox 3.5 - Windows XP word-wrap: break-word Yes No No No Firefox 3.5 - OS X None No No Yes No Firefox 3.5 - OS X <wbr> Yes No No No Firefox 3.5 - OS X ­ or ­ Yes Yes No No Firefox 3.5 - OS X word-wrap: break-word Yes No No No IE6 - Windows XP None No No No Yes IE6 - Windows XP <wbr> Yes No No No IE6 - Windows XP ­ or ­ Yes Yes No No IE6 - Windows XP word-wrap: break-word Yes No No No IE8 - Windows XP None No No Yes No IE8 - Windows XP <wbr> Yes No No No IE8 - Windows XP ­ or ­ Yes Yes No No IE8 - Windows XP word-wrap: break-word Yes No No No Safari 4.0 - OS X None No No Yes No Safari 4.0 - OS X <wbr> Yes No No No Safari 4.0 - OS X ­ or ­ Yes Yes No No Safari 4.0 - OS X word-wrap: break-word Yes No No No
Sample HTML:
<html> <head> <style> div { width: 4em; border: 1px solid black; margin-bottom: 6em; padding: .25em; } </style> </head> <body> This is text easily contained by the DIV: <div>proper width</div> A long word with no character breaking: <div> AReallyLongWordThatNeedsToBeBroken AndAnotherWord </div> <i><wbr></i> tag: <div> A<wbr>R<wbr>e<wbr>a<wbr>l<wbr>l<wbr>y<wbr>L<wbr>o<wbr>n<wbr>g<wbr>W<wbr>o<wbr>r<wbr>d<wbr>T<wbr>h<wbr>a<wbr>t<wbr>N<wbr>e<wbr>e<wbr>d<wbr>s<wbr>T<wbr>o<wbr>B<wbr>e<wbr>B<wbr>r<wbr>o<wbr>k<wbr>e<wbr>n A<wbr>n<wbr>d<wbr>A<wbr>n<wbr>o<wbr>t<wbr>h<wbr>e<wbr>r<wbr>W<wbr>o<wbr>r<wbr>d </div> <i>&shy;</i> character: <div> A­R­e­a­l­l­y­L­o­n­g­W­o­r­d­T­h­a­t­N­e­e­d­s­T­o­B­e­B­r­o­k­e­n A­n­d­A­n­o­t­h­e­r­W­o­r­d </div> <i>overflow: scroll</i> CSS attribute: <div style="overflow: scroll"> AReallyLongWordThatNeedsToBeBroken AndAnotherWord </div> <i>word-wrap: break-word</i> CSS attribute: <div style="word-wrap: break-word"> AReallyLongWordThatNeedsToBeBroken AndAnotherWord </div> </body> </html>讨论(0)
加载中...
- 热议问题