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

This article introduces the knowledge about "how to solve the problem of CSS long English word page display". In the actual case operation process, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

jianyan

In page layout, long English words often overflow paragraph containers. How to solve this problem? The following comparative demonstration procedures are prepared:

demo program

42du.cn-Online Demo

Partial html code

word-break:break-all;Extraordinarilylonglongword!

CSS code

.break-all{word-break:break-all;}.break-word{word-wrap:break-word;}.hyphens{word-wrap:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;}

problem

In English paragraph typesetting, we often encounter long English words. Generally, by default, if the word typesetting reaches the boundary of the container, the word will be automatically moved to the next line. If the length of a single word is greater than the width of the container, it will overflow the container boundary. See the first part of the demo where the page is Extraordinarily long beyond the container boundary.

When you mention line breaks in CSS, you naturally think of word-break and word-wrap. Specific differences can be seen in the comparison between the second and third parts of the presentation.

word-break:break-all;

The above statement is shown in Part II of the presentation. When a word is typeset to the container boundary, the word is broken into two parts, and the latter part is moved to the next line. The right-hand side of the paragraph is neat, and I like that. But break-all causes a lot of broken words at the end of the line, affecting the reading experience.

word-wrap:break-word;

The above statement is shown in Part III of the presentation. When words are typeset to the container boundary, move the words to the next line first. When the word length exceeds the line width, the word is broken. That is, priority line break, line break failure, and then use the word break. This typesetting paragraph right side is not neat enough, there is white space, but will not cause a large number of words to be broken, nor will it produce overflow.

hyphens:auto;

The above statements are shown in Part IV of the presentation. If you want to go further and add a hyphen (-) to a broken word, you can use hyphens:auto. However, the compatibility of this declaration is poor at present.

"CSS long English word page shows how to solve the problem" content is introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the website. Xiaobian will output more high-quality 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.