HTML div css force line feed without line feed

1. Force line breaks and end with a ellipsis.
<Div style = "width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
Why can't I see the results?
</Div>
2. css wrap
Div {word-wrap: break-word; word-break: normal ;}

3. css forces English words to be disconnected
Div {word-break: break-all ;}
For div nesting, to enable the inner div to wrap automatically based on the content, you can set only the div width of the outer and white-spance: nowrap.
 
Word-break: break-all and word-wrap: break-word both enable automatic line feed of its container content such as DIV
Their differences are:
1. word-break: break-all: for example, if the div width is PX, its content will be automatically wrapped in PX. If the end of the line has a long English word (congratulation, etc ), it truncates the word and converts it to the backend part of the row whose end is conra (congratulation) and the next row is tulation (conguatulation.
2. word-wrap: the break-word example is the same as above, but the difference is that it regards the entire word congratulation as a whole. If the end width of the row is insufficient, it automatically puts the entire word in the next line, instead of truncating the word.