0

これは Chrome では発生しません。ネストされた要素に省略記号を実装しようとしています。他の誰かがこれに遭遇しましたか? もしそうなら、回避できましたか?

<span>bar <span class="foo">foo</span> bar</span>

span.foo {
    display: inline-block;
    overflow: hidden;        
}

フィドル

<a href="http://www.stackoverflow.com">bar <span class="foo">foo</span> bar</a>

span.foo {
    display: inline-block;
    text-decoration: inherit;
    overflow: hidden;        
}

フィドル

4

2 に答える 2

3

vertical-align: topあなたが持っている場所を追加しますdisplay: inline-block。

于 2012-11-28T16:59:43.797 に答える
1

これは、ブロック要素でのみ機能する overflow の仕様と、行の高さがどのように機能するかによるものです。

あなたの外側のスパンはデフォルトです display:inline。インライン要素にブロック要素を含めることはできません。ただし、に設定してdisplay:blockも問題は解決しません。

問題は、テキスト (外側の要素) のベースラインが内側の要素のボックスと同じであることです。したがって、ボックスはテキストを開始するのと同じ高さに配置されます (下に少し空白が残ります)。

とにかくデモがあるとわかりやすいかも。

内部スパンの行の高さをテキストの実際の高さよりも低く設定すると、ボックスのサイズが維持されます。もちろんthirtydotソリューションも有効です。

于 2012-11-28T17:28:53.977 に答える