### 新建一个块级元素<div>时，如果无文本内容输入，此时默认的行高为0；当有文本内容时，默认的行高为字体行高。
这里，还需要注意区分line-height与height的区别：
line-heigth是行高的意思，它指的是元素中文本内容的高度，height则是定义元素自身的高度。假如定义p标签的行高为line-heigth: 10px， 文字在浏览器中显示为一行时，这个p标签的高度会为10px，如果为两行，则p标签的高度为20px;
我们定义p的样式为height:10px,那么这个元素的高度并不会因为内容的多少而改变，如果文字过多显示为2行，文字的总高度超出了，这个p标签的高也不会随着文本而改变。
理解了行高的规则，css中有两个tips需要注意：
1. 文字两端对齐方法
```
<body>
<div>
<span>性别</span><br>
<span>联系方式</span>
</div>
</body>
```
<code>
div{
border: 1px solid black;
font-size: 20px;
}
span{
border: 1px solid red;
display: inline-block;
text-align: justify;
width: 100px;
line-height:20px;
height:20px;
overflow: hidden;
}
span::after{
content: '';
display: inline-block;
width: 100%;
border: 1px solid blue;
}
</code>
2. 多行文字溢出
<code>
div{
border: 1px solid black;
word-break: break-all;/* 拆分每个字母为一个文本 */
white-space: nowrap; /* 取消自动换行 */
overflow: hidden; /* 文本超出块容器部分隐藏 */
text-overflow: ellipsis; /* 超出文本现实为省略号 */
}
</code>
网友评论