Question

我想要一个带有overflow-x:hidden和overflow-y:visible的标题元素。但是，出于某种原因，似乎没有遵守overflow-y属性。你可以在这里观察到这一点（在Chrome和Firefox上测试）： http://jsfiddle.net/YgsAw/3/

在那个演示中，我希望看到“jjjjj”，但是j被切断了，看起来更像是1。

如果我在overflow-x:visible标记上设置h1，则突然显示文本的完整高度，但设置overflow-x:hidden会使其被剪裁。我希望overflow-y出现这种行为，但这似乎没有效果。为什么会这样，我该怎么办呢？

Answer 1

我在previous question找到了一些答案。根据{{3}}：

overflow-x和overflow-y的计算值与其指定值相同，只是某些与visible的组合不可能：如果指定为visible另一个是scroll或auto，然后visible设置为auto。如果overflow相同，则overflow-x的计算值等于overflow-y的计算值;否则它是overflow-x和overflow-y的计算值对。

此外，在the specs上，作者提到许多浏览器都施加了额外的限制：

在Gecko，Safari，Opera中，'visible'在与'hidden'结合使用时变为'auto'（换句话说：'visible'与其他与'visible'不同的东西组合成'auto'）。

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

我不了解我的情况可行的解决方法。

修改

我非常确定我可以通过将标题标记嵌套在另一个标记中来完成我想要的操作：<div><h1>title</h1></div>。内部h1具有line-height:normal以使所有内容垂直可见，以及overflow:hidden使其截断。外部元素可以具有严格限制的高度和overflow:visible。这不是理想的，但它似乎是最好的选择。

Answer 2

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

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

只需确保以下元素是块元素，因此它不会在同一行中启动。那或使用正确的行高，然后使用负边距。毕竟，我只能猜到你要做的事情......祝你好运！

为什么overflow-x：隐藏剪辑我的下降器？

2 个答案: