Css 为什么overflow-x:hidden会剪辑我的后代？

我希望有一个标题元素，其

overflow-x:hidden

和

overflow-y:visible

。但是，由于某些原因，

overflow-y

属性似乎没有得到遵守。您可以在这里看到这一点（在Chrome和Firefox上测试）：

在那个演示中，我希望看到“jjj”，但相反，j被切断，看起来更像1

---

如果我在

h1

标记上设置

overflow-x:visible

，则文本的整个高度突然可见，但设置

overflow-x:hidden

会将其剪裁。我希望溢出-y中出现这种行为，但这似乎没有效果。这是为什么？我能做些什么？

似乎将H1元素更改为内联元素将获得所需的结果：

h1 {
    margin: 10px;
    padding: 0;        
    overflow-x: hidden;
    overflow-y: visible;
    line-height: 0.5em;
    display:inline;
}

只要确保下面的元素是块元素，这样它就不会在同一行中开始。或使用正确的行高，然后使用负边距。毕竟，我只能猜测你想做什么。。。祝你好运

我在一篇文章中找到了一些答案。根据：

overflow-x

和

overflow-y

的计算值与它们的指定值相同，只是一些与

可见的组合是不可能的：如果一个指定为
可见
，另一个指定为
滚动
或
自动
，然后
visible
设置为
auto
。如果
overflow-y
相同，则
overflow-x
的计算值等于
overflow-y
的计算值；否则它是
overflow-x
和
overflow-y
的一对计算值

此外，作者还提到，许多浏览器都有附加限制：

在Gecko、Safari、Opera中，“可见”与“隐藏”组合时也会变成“自动”（换句话说，“可见”与“可见”以外的任何其他组合时会变成“自动”）

该页面还提供了可以观察到这种效果的所有可能组合的演示

我不知道针对我的情况有什么可行的解决办法

编辑

我很确定我可以通过将我的title标签嵌套在另一个标签中来做我想做的事情：
title
。内部
h1
具有
行高：normal
使所有内容垂直可见，以及
溢出：hidden
使其截断。外部元件可以具有严格限制的高度和溢出：可见。这并不理想，但似乎是最好的选择。
我认为这是因为内联元素根本不遵循溢出属性。这对他们来说毫无意义。不幸的是，这对我不起作用。目标是使用
空白：nowrap
和
文本溢出：省略号
使标题在过长时自动缩短。我认为我不能让它在内联元素中正常工作。@Calvin:是的，这是正确的。我刚刚回顾了规范，它说（这包括内联块）。规范是我能找到的全部，但它与你的问题无关-另一方面，我没有意识到任何UA特定的行为，这似乎击中了要害。事实上，对于您的情况，似乎没有任何可行的解决方法。不过，值得注意的是，您可以将焦点放在
h1
上，并滚动它以查看下降者：）（
溢出
而不是
可见
不会阻止某些内容滚动；它只会导致可视剪辑）我的解决办法是在容器底部加一点额外的填充物。@Qaz这种修复方法确实有效——事实上，这些都是我们为完成任务而做的事情——但它深深地刺激了我的感觉。确切地说，我需要多少空间来确保每个平台上的所有内容都是可见的？那个填充物会影响我的布局，使它更难看吗？要权衡考虑。我最终选择了接受答案底部建议的破解方法，它添加了额外的HTML节点，但保留了对元素高度的精确控制，并保证垂直溢出始终可见。