A solution for CSS text wrapping failure in both Chinese and English

Problem:

In a div with a Set width, when the length of the Chinese text entered exceeds the set width, it is automatically switched to the next line. However, if you enter English letters, English letters are directly output in the same row regardless of the div width, resulting in the div width far exceeding the configured size.

Cause: In a div, if there is no space between English letters, it will think that this is an English word by default, so the word is output once without line breaks. So, do we have to add a space in the middle of each letter to solve this problem? Actually, you don't need to use CSS.

Solution: Set word-break: break-all in the style of the div to enable automatic line feed. The added div code is roughly as follows (div lines are automatically wrapped in Chinese and English ):

Copy to ClipboardReference: [www.bkjia.com] <div style = "word-break: break-all; width: 20px "> now the English here reaches the length of 20px, And the next line is automatically changed </div>

From: Ping ke xiaoju (http://www.cnblogs.com/piikee