Why does overflow-x:hidden clip my descenders?

后端 未结 2 761
甜味超标
甜味超标 2021-02-12 16:51

I would like to have a title element with overflow-x:hidden and overflow-y:visible. However, for some reason the overflow-y property does

2条回答
  •  不要未来只要你来
    2021-02-12 17:27

    I found some answers in a previous question. According to the specs:

    The computed values of overflow-x and overflow-y are the same as their specified values, except that some combinations with visible are not possible: if one is specified as visible and the other is scroll or auto, then visible is set to auto. The computed value of overflow is equal to the computed value of overflow-x if overflow-y is the same; otherwise it is the pair of computed values of overflow-x and overflow-y.

    Furthermore, on this page the author mentions that many browsers impose additional restrictions:

    In Gecko, Safari, Opera, ‘visible’ becomes ‘auto’ also when combined with ‘hidden’ (in other words: ‘visible’ becomes ‘auto’ when combined with anything else different from ‘visible’).

    That same page also provides demos for all possible combinations where this effect can be observed.

    I am not aware of a viable workaround for my situation.

    EDIT

    I'm pretty sure I can do what I want by nesting my title tag in another tag:

    title

    . The inner h1 has line-height:normal to make everything vertically visible, as well as overflow:hidden to make it truncate. The outer element can have a strictly limited height and overflow:visible. It's not ideal, but it seems like the best option.

提交回复
热议问题