21

overflow-x:hiddenとを含むタイトル要素が必要overflow-y:visibleです。しかし、なぜかoverflow-yプロパティが守られていないようです。これはここで確認できます (Chrome と Firefox でテスト済み): http://jsfiddle.net/YgsAw/3/

そのデモでは、「jjjjj」が表示されることを期待していますが、代わりに j が切り取られ、1 のように見えます。

タグを設定overflow-x:visibleすると、突然テキストの全高が表示されますが、設定するとクリップされます。からこの動作を期待しますが、効果がないようです。これはなぜですか?どうすればよいですか?h1overflow-x:hiddenoverflow-y

4

2 に答える 2

11

前の質問 でいくつかの回答を見つけました。仕様によると：

との計算値はoverflow-x、 とoverflow-yの一部の組み合わせvisibleができないことを除いて、指定された値と同じです。一方が として指定されvisible、もう一方がscrollまたはautoである場合、visibleは に設定されautoます。の計算値は、 ifoverflowの計算値と同じです。それ以外の場合は、との計算値のペアです。overflow-xoverflow-yoverflow-xoverflow-y

さらに、このページで著者は、多くのブラウザーが追加の制限を課していると述べています。

Gecko、Safari、Opera では、'visible' は 'hidden' と組み合わせると 'auto' になります (つまり、'visible' 以外のものと組み合わせると、'visible' は 'auto' になります)。

同じページには、この効果が観察できるすべての可能な組み合わせのデモも用意されています。

私は自分の状況で実行可能な回避策を知りません。

編集

タイトルタグを別のタグにネストすることで、やりたいことができると確信しています: <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 に答える