The solution to the problem that the HTML text interface cannot automatically wrap in English

question:

In a div with a set width, when the length of the Chinese text we input exceeds the set width, it will automatically switch to the next line. However, if you input pure English characters or numbers, no matter what the width of your div is set at this time, it will not wrap and output on the same line to achieve the overflow effect.

reason:

Chinese and English word segmentation methods are different

This is because if there is no space between English letters in the div, it will consider it an English word by default, so the word will be output at one time without wrapping. So, do we have to add a space between each letter to solve this problem? In fact, it is not necessary, it can be achieved through CSS.

Solution :

Set word-break: break-all or word-break: break-word in the style of the div  ;  to allow line breaks within words to achieve automatic line breaks.

The difference between the two methods is explained:

1. word-break:break-all For example, if the width of a div is 400px, its content will automatically wrap at 400px. If there is a long English word (congratulation, etc.) at the end of the line, it will truncate the word and become the end of the line For conra (the front-end part of congratulation), the next line is the back-end part of tulation (conguatulation).

2. The example of word-wrap:break-word is the same as above, but the difference is that it will treat the whole word of congratulation as a whole, if the end of the line is not wide enough to display the whole word, it will automatically put the whole word on the next line, and Words are not truncated. Also, if the word is too long, it will also be segmented.

Special situation:

Setting word-break:break-all or word-wrap:break-word is invalid, and the string will not wrap automatically.

After investigation, it was found that there are two reasons:

1. word-wrap has no effect on inline elements

2. In general, the element has the default white-space:normal (wrap automatically, no line wrap is white-space:nowrap), which may be caused by the white-space set in the element is norwrap, and the line cannot be wrapped. so need 

white-space:normal;
word-break:break-all;
这样问题就解决了。

white-space handles the blanks in the program, the default is normal (the browser will ignore the blanks)

3. The element setting under the td tag of the table word-wrap：word-breakhas no effect