• 1. word-break:break-all;Only works for English, breaks lines based on letters
• 2. word-wrap:break-word;Only works for English, breaks lines based on words
• 3. white-space:pre-wrap;Only works for Chinese, forces line breaks
• 4. white-space:nowrap;Forces no line breaks, works for both
• 5. white-space:nowrap; overflow:hidden; text-overflow:ellipsis;No line breaks, overflow is hidden and appears as ellipsis

Note:You must specify the container's width (width), otherwise it won't work.

word-break syntax

word-break : normal | break-all | keep-all

Parameters:

• normal : Follows text rules for Asian and non-Asian languages, allows line breaks within characters
• break-all : This behavior is the same as normal for Asian languages. It also allows arbitrary breaks within characters in non-Asian language text lines. This value is suitable for Asian text containing some non-Asian text
• keep-all : Same as normal for all non-Asian languages. For Chinese, Korean, and Japanese, character breaks are not allowed. Suitable for non-Asian text containing a small amount of Asian text

More referencesCSS3 word-break property