Solutions for css continuous character wrap (word-wrap and word-break)

Source: Internet
Author: User
Tags printable characters regular expression trim

The following are common browser support information:

Surface is the support of common browsers:

  IE6/7/8[1] Firefox2/3[2] Firefox3.5 Opera9 + Safari9.5 +/Chrome
{Word-wrap: break-word ;} The width of the td element must be set.
See examples 4 and 5.
Not supported The td element is not supported.
See examples 4 and 5.
Not supported The td element is not supported.
See examples 4 and 5.
{Word-break: break-all ;} Continuous symbols are not supported.
See Example 3.
Not supported Continuous symbols are not supported.
See Example 3.
Not supported Supported

{Word-break: break-all;} causes serious reduction in the readability of English and numbers, and cannot wrap continuous symbols. Therefore, {word-wrap: break-word ;} is a relatively good choice. Note that word-wrap in various browsers is inconsistent on td, so avoid using it directly on td.

However, in the face of poor browser support, JavaScript cannot be used to solve this problem, that is, when the browser does not support the CSS solution, insert the appropriate position of the continuous string & #8203; (Of course, you can also use <wbr/> and & shy;. For The support of these three characters in The browser, see The "The wbr tag" of ppk.), these characters are not displayed in the browser, but long string line breaks. & #8203; and & shy; both cause a large number of non-printable characters in the copied text, resulting in a sharp increase in the number of characters, more seriously, the copied link string is unavailable. Therefore, <wbr/> is a good solution. Although <wbr/> is not supported in IE8 and has bugs in Safari, however, these browsers can directly use CSS {word-wrap: break-word} to Implement <wbr/> processing. To be compatible with <wbr/> In Opera, set CSS: wbr: after {content: "0200B "}.

Override the implementation method

The specific implementation code is as follows:

Function fnBreakWordAll (o ){
Var o = o | {},
IWord = o. word | 13,
IRe = o. re | '[a-zA-Z0-9]',
BAll = o. all | false,
SClassName = o. className | 'word-break-all ',
AEls = o. els | (function (){
Var aEls = [],
AAllEls = document. getElementsByTagName ('*'),
Re = new RegExp ('(? : ^ | \ S +) '+ sClassName + '(? : \ S + | $ )');
For (var I = 0, iLen = aAllEls. length; I <iLen; ++ I ){
If (re. test (aAllEls [I]. className )){
AEls [aEls. length] = aAllEls [I];
Return aEls;
}) () | [],
FnBreakWord = function (oEl ){
// Modified based on
If (! OEl | oEl. nodeType! = 1 ){
Return false;
} Else if (oEl. currentStyle & typeof oEl. currentStyle. wordWrap === 'string '){
BreakWord = function (oEl ){
OEl. runtimeStyle. wordWrap = 'break-word ';
Return true;
Return breakWord (oEl );
} Else if (document. createTreeWalker ){
Var trim = function (str ){
Str = str. replace (/^ ss */,'');
Var ws =/s /,
I = str. length;
While (ws. test (str. charAt (-- I )));
Return str. slice (0, I + 1 );
BreakWord = function (oEl ){
Var dWalker = document. createTreeWalker (oEl, NodeFilter. SHOW_TEXT, null, false );
Var node, s, c = String. fromCharCode ('20140901 '),
// Re =/([a-zA-Z0-9 })/;
Re = new RegExp ('+ iRe +' {0, '+ iWord + '})');
While (dWalker. nextNode ()){
Node = dWalker. currentNode;
S = trim (node. nodeValue). split (re). join (c );
Node. nodeValue = s;
Return true;
Return breakWord (oEl );
For (var I = 0, n = aEls. length; I <n; ++ I ){
Var sUa = navigator. userAgent,
STn = aEls [I]. tagName. toLowerCase ();
If (/Opera/). test (sUa) | (/Firefox/). test (sUa) | (/KHTML/). test (sUa )&&
(STn = 'TD '| sTn = 'th') | bAll ){
FnBreakWord (aEls [I]);

For more information, see

The fnWordBreakAll function provides the following custom parameters:

FnWordBreakAll ({word: 15, re: '[\ w]', all: true });

Parameters Value Description
Word Positive integer. The default value is 13. U8203 is not inserted into words within this word, and there are not many words with more than 13 letters in the impression. This ensures that most words will not be broken.
Re Regular expression, default [a-zA-Z0-9] Regular expression of a word, used to determine the character composition of a word, note the escape
All Boolean value. The default value is false. Determine whether to execute in all browsers. It is mainly used in Opera and Firefox by default, and when the class application is executed on th or td Safari. when word-break-all is not defined, the style is added to IE.
ClassName Valid class name. The default value is word-break-all. Attribute name corresponding to the element of the execution function


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.