前端工程师实战16：详解字体垂直对齐、字体居中对齐、字体行间距（行高）、文字省略号处理

大家好，全套HTML和CSS入门与实战课程正在我的专栏《HTML与CSS入门与进阶》更新中！按知识点循序渐进，按照顺序读下来绝对比搜索网上教程更加紧凑！内容通俗易懂，图文并茂，欢迎订阅！

字体简写属性

行高line-height

行高：行之间的高度（line--height）指的是文字占有的实际高度。

此时div的高度就是文字的行高，

就是边框里面的高度就是行高，如果设置了line-height:200px：

行高除了可以设置大小（px，em，rem。。）还可以是一个整数，行高将会是字体的倍数。

比如line-height:2此时字体大小是50px，行高就是100px

行宽

就是字体框，字体存在的格子，设置font-size实际上就是设置字体框的高度

行高会在字体框的上下平均分配，比如行高100，字体框是50，那么就会在字体的上面分配25，下面分配25，让字体的中间。

所以行高可以用来使文字垂直居中：

此时将line-height设置与元素高度一样，可以使单行文字在一个元素中垂直居中：

        div{
            font-size:50px;
            height:200px;
            border:1px red solid;
            line-height:200px
        }

还经常用来设置文字的行间距。行间距=行高-字体大小

此时行高200px，字体大小50px，那么行间距就是200-50=150。

 

字体的简写属性

font可以设置字体相关的所有属性，（可以一起设置font-size，font-family）

代码等价。

先写字体大小，在写字体族

也可以指定行高font:20px/2 'Times New Roman', Times, serif加一个/号接着是行高（line-height）的值，不写也可以。如果不写，就使用默认值，即使上面样式设置了行高

此时设置了line-heigh:2，但是font没有指定行高，就使用默认值了，而不是2.如果想line-height:2生效，可以使他放在font的下面或者直接font :50px/2 'Time New Roman', Times, serif;（原因是font的简写属性的行高默认值覆盖了在他上面的行高默认值）

字重font-weight

font-weight:bold字体加粗。

可选值：

1. normal:默认值，不加粗

2. bold:字体加粗

3. 100-900九个级别（没什么用）

font-style字体风格

可选值：

1. normal:默认值

2. italic斜体

综上，可以使用font统一设置：

font:italic bold 50px/2 'Time New Roman', Times, serif;

同理和统一设置行高也是一样，如果不写italic bold，不写就用默认值，即使上面也设置了这个属性。

文本样式

文本水平对齐text-align

默认是左侧对齐：

text-align可选值：

1. left：默认值，左侧对齐

2. right:右对齐

3. center:居中对齐

4. justify:两端对齐（两边都帖死，不留空白）

文本垂直对齐vertical-align

vertical-align可选值

1. baseline,默认值，子元素基线对齐（文字底边中线）

2. top:顶部对齐，子元素和父元素的基线对齐

3. bottom:底部对齐，子元素和父元素基线对齐

4. middle:居中对齐，子元素的中线和父元素的中线对齐

5. 指定一个px，正数往上走，负数往下走。

之前说过，图片是一个替换元素，相当于文字，所以也有文字的基线，可以设置vertical-align:top/middle/bottom来全部压着边线

文字省略号处理

之前我们说过通过text-decoration:none可以去除a标签的下划线，其它的可选值如下：

1. none:默认值，没有线

2. underline:下划线

3. line-through:删除线

4. overline:上划线

还可以指定颜色和样式text-decoration:overline red dotted

京东：

文字太多出现省略号的做法：

.box2{
    /*white-space设置网页如何处理空白
    可选值：
        1. normal:正常
        2. nowrap:不换行（字太多会出现滚动条）
        3. pre:保留空白（你写的是怎么样就显示怎么样，多个空格也正常显示）
    */
    /*限制宽度，不换行,溢出内容裁剪 在加上 ellipsis就可以显示省略号*/
    width:200px;
    white-space: nowrap;
    overflow:hidden;
    
    text-overflow:ellipsis;
}