How to use word-break:break-all to force a new line?

Under normal circumstances, elements have the default white-space:normal (automatic line wrapping, PS: no line wrapping is white-space:nowrap). When the entered text exceeds the definition will automatically wrap after the width of the container, but when the entered data is a bunch of characters or letters or numbers without spaces (regular data should not be there, but some testers will do it this way), it will appear when the width of the container is exceeded. Make the container bigger without wrapping.

Solution (using IE, chrome, FF as test browsers):

{　　word-break:break-all;
　　 word-wrap:break-word;
}

The following is the difference between these two methods:

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

2, word-wrap:break-word The example is the same as above, but the difference is that it will treat the entire congratulation word 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 without truncating the word.

3, word-break:break-all Supported version: IE5 or above This behavior is the same as normal in Asian languages. Breaks within any word of a line of non-Asian language text are also allowed. This value is suitable for Asian text that contains some non-Asian text.

word-wrap:break-word Supported version: IE5.5 or above The content will wrap within the boundary. If necessary, word-break will also occur. The table automatically wraps to avoid stretching.

Syntax: word-break: normal | break-all | keep-all
Parameters: normal: According to the text rules of Asian languages ​​and non-Asian languages, line breaks are allowed within words
　break-all : The behavior is the same as normal for Asian languages. Breaks within any word of a line of non-Asian language text are also allowed. This value is suitable for Asian text that contains some non-Asian text
keep-all : Same as normal for all non-Asian languages. For Chinese, Korean, and Japanese, word breaks are not allowed. Suitable for non-Asian text that contains a small amount of Asian text

Syntax: word-wrap: normal | break-word
Parameters: normal: Allow content to push against the specified container boundary
　break-word : Content will wrap within boundaries. If necessary, word-break also occurs. Description: Sets or retrieves whether to break the line when the current line exceeds the boundary of the specified container.

Suggestion: 3C detection of word-break will show problems, which will also cause problems in Baidu snapshots - this attribute OPERA FIREFOX browser does not support the word-break attribute. You can use white-space:normal ; to replace it, so that the line breaks can be correct under FireFox and IE. Also, please note that the spaces between words cannot be used to replace them, otherwise the line breaks will not be correct.

The above is the detailed content of How to use word-break:break-all to force a new line?. For more information, please follow other related articles on the PHP Chinese website!