1.word-wrap 属性 (overflow-wrap)

相似属性 word-break

• CSS3中将 <' word-wrap '> 改名为 <' overflow-wrap '>；
• 由于历史原因，当你使用 <' overflow-wrap '> 时，最好同时使用 <' word-wrap '> 作为备选，作向前兼容。

word-wrap: normal
只在允许的断字点换行（浏览器保持默认处理）。

image.png

word-wrap:break-word    
在长单词或 URL 地址内部进行换行。

image.png

其实我觉得一般用上面的就可以
word-break: normal|break-all|keep-all;

image.png

2.text-overflow

ellipsis    显示省略符号来代表被修剪的文本。

clip    修剪文本。

image.png

3.line-clamp

控制显示的行数

4.line-height

line-height是行高的意思，它决定了元素中文本内容的高度，height则是定义元素自身的高度。

height：表示 行高
line-height：表示 每行文字所占的高度