21

我想要一个带有overflow-x:hiddenand的标题元素overflow-y:visible。但是，由于某种原因，该overflow-y属性似乎没有被遵守。您可以在此处观察（在 Chrome 和 Firefox 上测试）：http: //jsfiddle.net/YgsAw/3/

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

如果我overflow-x:visible在h1标签上设置，那么突然可以看到文本的整个高度，但是设置overflow-x:hidden会使其被剪裁。我希望这种行为来自overflow-y，但这似乎没有效果。为什么会这样，我该怎么办？

4

2 回答 2

11

我在上一个问题中找到了一些答案。根据规格：

和的计算值overflow-x与overflow-y它们的指定值相同，除了某些组合visible是不可能的：如果一个被指定为visible，另一个是scroll或auto，则visible设置为auto。的计算值overflow等于overflow-xif的计算值overflow-y相同；overflow-x否则它是和的计算值对overflow-y。

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

在 Gecko、Safari、Opera 中，当与“隐藏”组合时，“可见”也变为“自动”（换句话说：当与“可见”不同的任何其他内容组合时，“可见”变为“自动”）。

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

对于我的情况，我不知道可行的解决方法。

编辑

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

于 2012-06-22T20:45:25.937 回答
3

似乎将 H1 元素更改为内联元素将为您提供所需的结果：

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

只需确保以下元素是块元素，因此它不会在同一行开始。或者使用正确的行高，然后使用负边距。毕竟，我只能猜到你想做什么......祝你好运！

于 2012-06-22T18:12:39.067 回答