HTML div css forces line break without line break

1. Force no line breaks and end with an ellipsis.

Hello friends, friends, friends, why can’t I see the effect

2. CSS automatically wraps lines
div{ word-wrap: break-word; word-break: normal; }

3. CSS forces English words to break
div{word-break:break-all;}
If divs are nested, To make the inner div automatically wrap according to the content, you can only set the width of the outer div and white-spance:nowrap.

word-break:break-all and word-wrap:break-word both enable the content of its container such as DIV to automatically wrap
Their difference is:
1, word-break:break-all For example, the div width is 200px , its content will automatically wrap to 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 conra (the front part of congratulation) at the end of the line, and the next line will be tulation (conguatulation) of the backend part.
2. The word-wrap:break-word example is the same as above, but the difference is that it will congratulate 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 on the next line. without truncating the words.