overflow : hidden + display : inline-block이 텍스트를 위로 이동

overflow : hidden + display : inline-block이 텍스트를 위로 이동

---

다음 HTML이 있습니다.

<div>
    a<span style="overflow: hidden; display: inline-block;">b</span>c
</div>

내가 기대하는 것 : abc.

내가 보는 것 (Chrome, Safari, Firefox) :

ba및 보다 큽니다 c. 왜 그렇고 어떻게 고칠까요?

---

이는 inline-block요소의 높이가 부모와 같고 overflow: hidden아래쪽 가장자리가 부모의 텍스트 기준선에 정렬 되기 때문에 발생합니다. 결과적으로 텍스트의 디 센더에 사용할 수있는 공간은 기본적으로 <span>( JSFiddle )에 대해 두 배가됩니다 .

또한 제공하여이 문제를 해결할 수 있습니다 vertical-align: bottom.

참조 URL : https://stackoverflow.com/questions/20566710/overflowhidden-displayinline-block-moves-text-upwards