line-height:1+overflow:hidden的奇妙反应

line-height = 1会发生什么？

前几天测试提了个bug给我，说英文字符串被遮挡了部分，我看看了代码，简单来说就是当标签设置为line-height:1;overflow:hidden，部分英文（gpqj等）下半部分会被遮挡。

简单的标签结构、css属性和展示效果如下：

<div class="cell">我只是个文字测试，我什么都不知道</div>
<div class="cell">ggpqkjqoepvm</div>
.cell{
    line-height:1;
    overflow: hidden;
}

问题不大，将line-height设置为normal就行了，但是设置为1时为什么会出现这个现象呢？这里面到底是怎么关系？说到这个，我们可以先关注一下字体度量和line-height。

line-height是css属性，先来一发官方描述：

line-heigth：用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。

line-height默认值是normal，通常normal被设置为1.0-1.2之间的一个数字，盲点出现了，为啥不设置成固定的1？为啥要设置成大于1的数？而且还不是固定的数，而是一个区间内变化的量？

当line-height为数字是我们知道表示为font-size的倍数，font-size相同的情况下，不同的字体对应的元素高度一样么？此时line-height会随着字体变化么？换个简而易懂的说法，不同的字体，line-height的默认值是一样的么？

再多的理论知识不如实地操练看看。随便选取三个不同的字体试试。（我的浏览器是chrome，不同浏览器对部分字体的表现情况和兼容情况不同）

<p>
    <span class="a">Ba</span>
    <span class="b">Ba</span>
    <span class="c">Ba</span>
</p>

p  { font-size: 100px }
.a { font-family: Helvetica;background:green }
.b { font-family: cursive ;background:red}
.c { font-family: fantasy;background:yellow}

表现结果如下：

       

可以看到font-size都为100px，font-family不同，得到的span高度各不相同。说明不同的字体对应的line-height的normal值是不同滴。

这里引用一下其他文章的说明（原文链接在最下面）：

小工具fontforge，用于分析字体度量。

注意上面说的，字体度量 ascender、descender、capital height、x-height 等值是允许超出em-square的。

简而言之：我们设置font-size高度是相对于字体的em-square部分，所以字体设计超出em-square时怎么办呢？不展示了？别急，line-height来帮忙了。

上面的例子中Catamaran字体占据了1640相对单位，em-square只有1000个相对单位，此时看ascender+descender相加刚好为1640，说明元素的实际高度是由ascender和descender共同控制的，line-height默认值normal = (ascender+descender ) / em-square = 1.64。当字体设置与em-square一样大时，ascender+descender =em-square ， line-height的normal = 1。当然还存在normal默认值小于1的情况。

其实严格来说normal默认值的计算我们还漏掉了line gap。正确完整的公式为 normal = (ascender+descender +line gap) / em-square。

上面这些值都由字体设计师设计字体的时候设定的。

再回到最初的问题，line-height = 1时等于font-size的设定值，此时设置元素实际高度 = em-square，再遇上overflow:hidden难怪元素部分会被遮挡。所以以后line-height设定为1（or其他数字）或者和font-size相同的值时请谨慎～

总结：

• line-height：normal默认值和字体有关，相同字体在不同浏览器下也不同。
• 当line-height设置的值比默认值小会存在显示不全的问题。不仅仅包括1。

文章中间涉及到content-area，和line-height关系值得研究，还有vertical-align，下次一定～～～～

 

---

相关文章：

一个由line-height引发的血案与思考

译文：深入理解 CSS：字体度量、line-height 和 vertical-align

原文：Deep dive CSS: font metrics, line-height and vertical-align