HTML Div CSS forced line wrapping not wrapped

1. Force not to wrap and end with ellipsis.
<div style= "width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;" >
Hello friend friend friend why can't I see the effect?
</div>
2. CSS Auto-wrapping
div{Word-wrap:break-word; word-break:normal;}

3, CSS Force English word break
Div{word-break:break-all;}
If div nesting, to make the inner div according to the content of automatic line wrapping, you can only set the outer div width, and white-spance:nowrap can be.

Word-break:break-all and Word-wrap:break-word are all able to wrap the contents of their containers, such as Div.
The difference between them is:
1,word-break:break-all such as a div width of 200px, its content will go to 200px word wrap, if the end of the line has a long English words (congratulation, etc.), it will truncate the word, to the end of the line is Conra ( Congratulation), the backend portion of the next behavior tulation (conguatulation).
2,word-wrap:break-word example is the same as above, but the difference is that it will congratulation the whole word as a whole, if the line end width is not enough to display the whole word, it will automatically put the whole word to the next line, not the word truncated.

