Shulou(Shulou.com)06/03 Report--

This article mainly introduces "such as understanding CSS properties in word-break and word-wrap", in daily operation, I believe many people in understanding CSS properties in word-break and word-wrap problems there are doubts, Xiaobian consulted all kinds of information, sorted out simple and easy to use operation methods, hope to answer "such as understanding CSS properties in word-break and word-wrap" doubts helpful! Next, please follow the small series to learn together!

1. Automatic word wrapping that comes with the browser

Each browser has its own automatic wrapping function, when the browser displays text, it will make the text wrap automatically at the right end of the browser or div element. The situation is as follows:

1.non-CJK: will wrap automatically at half-space or hyphen (-) positions, will not wrap in the middle of long words

2. CJK (China, Japan and South Korea): You can wrap after any CJK font

3. CJK contains non-CJK:non-CJK parts are processed according to non-CJK situation

4. When CJK contains punctuation marks, the browser will not place punctuation marks at the beginning of a line, but will make punctuation marks and the previous character form a whole for newline.

Second, word-break:

Properties and browser compatibility

valuedescriptionIFFChrome & SafariOperanormal browser default line breaks yesyeskeep-all CJK: no line breaks allowed, non-CJK: same as normal attribute,IE (for CJK: line breaks at empty spaces, connectors, or any punctuation),chrome&safari not supported (using default line breaks)yesyesnoyesbreak-all line breaks allowed, IE(no punctuation allowed at the beginning of a line), FF&Chrome&Safari(punctuation allowed at the beginning of a line) yesyesyes

3. word-wrap:

1. Value:

normal: newline in half space, connector position

break-word: Allow line breaks inside long words such as URL addresses

2. All browsers supported

IV. Examples

The code is as follows:

.box{width:100px;height:100px;border:2px solid #f00;color:#333;font:12px arial;margin-bottom:10px;}

.keepall{word-break:keep-all;}

.breakall{word-break:break-all;}

.breakword{word-wrap:break-word;}

The code is as follows:

All of them have automatic wrapping function, AAAAAA BBCCCCC, automatic wrapping at the right end.

In this example note the compatibility of keep-all in different browsers, newlines at special symbols!

All of them have automatic wrapping function, AAAAAA BBCCCCC, automatic wrapping at the right end.

Note the comma position in this example!

All of them have automatic wrapping function, AAAAAA BBCCCCC, automatic wrapping at the right end.

At this point, the study of "such as understanding word-break and word-wrap in CSS attributes" is over, hoping to solve everyone's doubts. Theory and practice can better match to help everyone learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.