css forced line break and beyond hidden implementation

1. Forced line break

word-break: break-all; only works in English, using letters as the basis for line breaks.

word-wrap: break-word; only works in English, using words as the basis for line breaks.

white-space: pre-wrap; only works for Chinese, forcing line wrapping.

word-break:break-all and word-wrap:break-word both enable the content of its container such as a div to automatically wrap. Their difference is:

1. word-break:break-all

Assume div If the width is 450px, its content will automatically wrap at 450px. If there is a long English word at the end of the line, it will truncate the word, keep part of it at the end of the line, and move the other part to the next line.

2. word-wrap:break-word

The example is the same as above, but the difference is that it will treat the entire word as a whole. If the end of the line is not wide enough to display the entire word, it will automatically put the entire word down. One line without truncating the word.

2. Prohibit line breaks and exceed hiding

white-space:nowrap; prohibits line breaks.

overflow:hidden; is to hide the extra content, otherwise the extra content will burst the container.

text-overflow:ellipsis; Let extra content be expressed with ellipsis... However, this attribute is mainly used in browsers such as IE. Opera browser uses -o-text-overflow:ellipsis; while Firefox browser does not have this function, and the extra content can only be hidden.