CSS 关于字体(2)

132 阅读2分钟

文字排布

line-height 行高,每一行的垂直距离。内容会在这个距离中自动居中,所以也有一种居中的方法是 heightline-height 设置成相同的。如果 line-height 的设置中,不给数字加单位的话,浏览器就会将这个系数当成倍数,去乘以字体大小。

是文字排布的水平空间上,有三个属性

  • letter-sapcing 字间距
  • word-spacing 词间距,这个属性在不含空格的语言中(比如中文)是不显示的,如果想显示需要手动加入空格,所以某种意义上可以算是空格间距?
  • width 宽度 。这里加入一个新的单位ch ,这是0的宽度,也有很多人用这个单位来排版

text-align 控制文字水平方向的对齐方式。属性值有 center 居中 、left 从左开始 、right 从右开始、justify 两端对齐。

text-intent 段落缩进。

text-decoration 文字装饰,属性值有 underline 下划线,line-through 删除线,等等。

text-transform 文字转换,可以转换大小写,lowercase 小写,uppercase 大写,capitalize 首字母大写。

white-space 空白,可以控制换行。nowrap 不换行,那么wrap 就是换行啦。

text-overflow 文字溢出,ellipsis 这个值可以将溢出部分的一部分变成... 这个属性值要配合溢出overflow:hidden; 来使用,不然溢出的部分是不会隐藏的。

line-clamp 可以截断文字,输入数字 x ,就代表着在 x 行进行文字的截断。

column-count 给文字分栏,传入数字 x ,代表分成 x 栏,使用column-gap 来设置栏间距。column-rule 可以设置分栏线,比如column-rule:2px solid blue 就可以生成一条2像素的蓝色直线作为分栏线。

direction 文字方向,ltr 从左向右,rtl 从右向左。但注意不是文字的内容,而是文字的排版。