问题
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 breaks inside a word.
It would also help if the markup looked nicer than mine (see my answer).
Edit:
Note this is specifically for user-generated content.
Edit 2:
About 25% of Firefox users on the site in question are still using v3.0 or below, so it is critical to support them. This is based on the last month worth of data (about 121,000 visits).
回答1:
The css property word-wrap: break-word will 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-wrap and white-space: pre-wrap. See here for more info. I have not tested this with older versions of Firefox though.
回答2:
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 DIV I 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>
回答3:
My answer from another instance of this question, found at Wrapping long text in CSS :
I use the combination
word-wrap: break-word;
overflow: hidden;
to deal with this. The word-wrap setting will allow the word to be wrapped despite its length in browsers which support that property, while the overflow setting will cause it to be cut off at the end of the available space in browsers which don't recognize word-wrap. That's about as graceful of degradation as you're likely to get without going to javascript.
回答4:
[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.
回答5:
You may want to check the word-wrap: break-word CSS 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: scroll for browsers that do not support word-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.
回答6:
I found a similar answer here: http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
A more robust browser support
CSS only
-ms-word-break: break-all;
/* Be VERY careful with this, breaks normal words wh_erever */
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
If your text is PHP generated you have a PHP function:
wordwrap
<?php
$text = "The quick brown fox jumped over the lazy dog.";
$newtext = wordwrap($text, 20, "<br />\n");
echo $newtext;
?>
Also, you can try PHP function explode if you have and know the delimiter. Display after with for loop (explode returns an array).
回答7:
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.)
回答8:
Enter keyboard line break at the point at which you want it to break.
eg.
Thisisaverylongword
would become
Thisisavery longword
来源：https://stackoverflow.com/questions/2257657/how-can-i-allow-text-to-wrap-inside-a-word-if-necessary