When writing a page, we often need to use the on-line text change, force a line break and display more than a few lines of display ellipsis and so, today we have for these issues to be a summary of it!
1, wrap
div{ word-wrap:break-word; word-break:normal; }
2, is not mandatory wrap
div{ white-space:nowrap; }
3, forced the English word wrap
div{ word-break:break-all; }
4, a single line of text does not wrap the excess text display ellipsis
div{ width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
5, multi-line text display ellipsis beyond hide unwanted text
div{ display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
6, table cells in a table single line of text does not wrap
table{ table-layout:fixed; } table tr td{ width:60%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }