文本显示的一些样式

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

相似属性 word-break

  • CSS3中将 <' word-wrap '> 改名为 <' overflow-wrap '>;
  • 由于历史原因,当你使用 <' overflow-wrap '> 时,最好同时使用 <' word-wrap '> 作为备选,作向前兼容。
word-wrap: normal
只在允许的断字点换行(浏览器保持默认处理)。
文本显示的一些样式_第1张图片
image.png
word-wrap:break-word    
在长单词或 URL 地址内部进行换行。
文本显示的一些样式_第2张图片
image.png
其实我觉得一般用上面的就可以
word-break: normal|break-all|keep-all;
文本显示的一些样式_第3张图片
image.png

2.text-overflow

ellipsis    显示省略符号来代表被修剪的文本。
clip    修剪文本。
文本显示的一些样式_第4张图片
image.png

3.line-clamp

控制显示的行数

4.line-height

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

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

你可能感兴趣的:(文本显示的一些样式)