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

This article mainly introduces how to solve the page display problem of long-English words in CSS, have a reference value, and friends needed can be referred to. I hope that everyone has a big gain after reading this article. Let’s take a look at you with everyone.

In terms of page typography, how to solve this problem in the case of a long-term word overflow segment container? The following comparative demonstration: presentation

part HTML code


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;}

】 Question

In the English paragraph version, the case of long-term words often encounter, generally by default, if the word version is released to the container boundary, the word will be automatically moved to the next row. And if the length of a single word is greater than the container width, an overflow vessel boundary is generated. The first part of the presentation in the text, the Extraordinarily length overflows the container boundary on the page.

In CSS mentioned the word break, it will naturally think of Word-Break and Word-WRAP. The specific difference contrast, the second and third part of the demonstration can be seen.

Word-Break: Break-all;

Ming, as shown in the second part. The word typography is to the container boundary, which will be disconnected to two parts, and the latter part is moved to the next line. In this way, the right side of the typographic paragraph is very neat, I like this effect. But Break-ALL will cause many rows of words to open, affect reading experience.

Word-Wrap: Break-Word;

The above declaration is shown in the third portion of the presentation. The word typography is to the container boundary, which is prioritized to move words to the next line. When the word length exceeds the line width, the word is disconnected. That is, the priority is broken, and when the line is disconnected, the word is disconnected. Such a typographic paragraph is not neat enough, there is a daemon production, but it will not cause a lot of words to be disconnected, nor will it produce overflow.


The above declaration is shown in the fourth portion. If you go deeper, you want to add a linker (-) to the disconnected word, you can use Hyphens: Auto. However, the compatibility of this statement is currently poor.

Thank you, you can read this article carefully, I hope that Xiaobian shares how to solve the page display problem of long-English words in CSS. The content is helpful. At the same time, I hope you will support Tumi Clouds, pay attention to Tumi Cloud Industry information channel, I will find TUMI clouds in trouble, detailed solutions are waiting for you!

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment