How to enable automatic word breaking in Firefox

Document directory

• Browser compatibility

Word-wrap is supported on the latest Firefox (3.5 +), refer to https://developer.mozilla.org/En/CSS/Word-wrap

 

Browser compatibility

Browser	Lowest version
Internet Explorer	5.5
Firefox (gecko)	3.5(1.9.1)
Opera (presto)	10.5(2.3)
Safari | chrome | WebKit	1.0| 1.0 | 85

• word-wrap:break-word Can be used to work around und lack pre{white-space:pre-wrap} Support in IE 5.5-7. Seewhite-spaceFor an example.
• IE8 introduced -ms-word-wrap As a synonym word-wrap. Don't use-ms-Prefix.

 

Basically, when a webpage encounters a line of "Chinese Text", it can be broken normally. However, for English words that are broken in IE and Firefox, use Word-wrap: Break-word in IE; that's it. However, if a large string of blank words is written in English text in Firefox, the web page will be opened, in the following example, the webpage is opened because the English text is too long, which affects the appearance of the webpage layout.

Ie from 5.5 ~ CSS of version 8.0 supports a word-wrap attribute. When you specify a break-word attribute, you can force the browser to break the word, in this way, you can avoid text interruption.

However, it is not feasible to use Word-wrap in Firefox. Firefox 3.0, which was officially released a few days ago, still does not support the word-wrap attribute, however, the word-wrap attribute has been compiled into the CSS 3.0 specification. I believe it will be supported one day later.

However, there is no way in Firefox either. There is an article on the Internet that shows how to enable automatic word breaking in Firefox. If you are interested, go and have a look.

Here are the necessary steps to achieve the goal:

1. Define a wordwrap category in CSS

 1 .wordwrap
2 {
3     word-wrap: break-word;
4     -moz-binding: url('wordwrap.xml#wordwrap'); 
5 
6     display: block;
7     overflow: auto;
8 }
 

The CSS definitions of these lines are meaningful. I will explain the four lines as follows:

The first line: show it to IE to generate broken words.

Line 2: For Firefox/Mozilla, execute a javascript code in binding mode. When element applies this wordwrap category, read wordwrap. the XML file contains a set of javascript programs that can be dynamically executed.

Row 3 and row 4: wordwrap. the XML file defines that when an overflow event occurs, a program is executed to break the line of the text. Therefore, the display attribute must be set to block to trigger the overflow event (Inline cannot be used ), the final overflow is set to auto.

 

2. Add a wordwrap. xml file.

<?xml version = "1.0"?><bindings xmlns = "http://www.mozilla.org/xbl" xmlns:html = "http://www.w3.org/1999/xhtml">  <binding id="wordwrap" applyauthorstyles="false">    <implementation>      <constructor>        //<![CDATA[                        var elem = this;            elem.addEventListener('overflow',                function()                {                    var exp = /<;\/*[_\s="'\w]+>/g;                                        var txt = elem.innerHTML;                    var chars = txt.split('');                    var newTxt = chars.join('');                                        newTxt = newTxt.replace(exp, reconstructTag);                                        elem.innerHTML = newTxt;                },false);                                function reconstructTag(_tag)                {                    return _tag.replace(//g, '');                }            //]]>      </constructor>    </implementation>  </binding></bindings>

I will not elaborate on the content. Please go to emulating CSS word-wrap for Mozilla/Firefox to read the relevant instructions.

3. Finally, enter the logo of the broken version in your HTML to set the wordwap category.

<SPAN class = "url wordwrap"> A very long website... </span>

In my example, the display effect in Firefox is as follows:

In this way, the three steps can achieve a perfect cross-browser Automatic Word breaking function. There is an Online Demo here. You can use Firefox to see how it works.