How to solve the page display problem of long English words in CSS?

Brief introduction

In page layout, we often encounter the situation where long English words overflow the paragraph container. How to solve this problem? The following comparison demonstration program is now compiled:

Demo program

42du.cn-Online demonstration program

Part of the html code

<div class="block">    <h4 id="word-break-break-all">word-break:break-all;</h4>    <p class="break-all">Extraordinarily longlong word!</p></div>
CSS代码
 .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;}

Question

When typesetting English paragraphs, we often encounter long English words. Generally, by default, if a word typeset to the container boundary, the word will be automatically moved to the next line for display. And 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 demonstration in the article, Extraordinarily the length of the page overflows the container bounds.

When it comes to word line breaks in CSS, word-break and word-wrap naturally come to mind. The specific differences can be seen in the comparison between the second and third parts of the demonstration.

word-break: break-all;

The above statement, as shown in the second part of the demonstration. When the word format reaches the container boundary, the word will be broken into two parts, and the latter part will be moved to the next line for display. This layout makes the right side of the paragraph neat, and I like the effect. However, break-all will cause many words at the end of the line to be broken, affecting the reading experience.

word-wrap: break-word;

The above statement, as shown in the third part of the demonstration. When the word format reaches the container boundary, the word is moved to the next line for display first. When the word length exceeds the line width, the words are broken. That is, in-line disconnection is given priority, and when in-line disconnection does not work, word disconnection is used. In this way, the right side of the typesetting paragraph is not neat enough and there is white space, but it will not cause a large number of words to be broken or overflow.

hyphens: auto;

The above statement is shown in the fourth part of the demonstration. If you go a step further and want to add a hyphen (-) to the broken words, you can use hyphens: auto. However, the compatibility of this statement is currently very poor.

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

The 20 most commonly used regular expressions in JavaScript

How to solve the cross-domain problem of ajax

The above is the detailed content of How to solve the page display problem of long English words in CSS?. For more information, please follow other related articles on the PHP Chinese website!