3

省略記号スタイルを使用して短縮された長いタイトルを視覚化したい。それはうまく機能し、期待どおりです。

場合によっては、テキストに末尾のアイコンを取得する必要があります（アクションを呼び出すため）。通常、私は:aftercss疑似セレクターを使用してこれを行います。

しかし、私は両方の詳細を一緒に機能させることができません。私が何をしようとしても、アイコンは実際にはテキストの後に配置されるのではなく、次の行に配置されます。そのため、ブラウザでは改行が使用されますが、これを防止しようとしています（省略記号スタイルの一部として）。値を指定するだけtopでは解決策はありません。テキストが短すぎて短縮できない場合に値が壊れてしまうためです。

これは、動作を示すための非常に単純化された例です。

HTMLマークアップ：

<div id="wrapper">
    <span id="text">some longish and wide text which should get a trailing icon when hovered</span>
</div>​

CSS定義：

#wrapper { 
    width:50%; 
    background-color: lightgray;
    margin: 10em;
    padding: 1em;
}
#text {
    font-size: 200%;
    padding: 0.2em;
    display: inline-block;
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 98%;
    background-color: gold;
}
#text:hover {
    background-color: goldenrod;
}
#text:hover:after {
    content: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/48x48/playback_play.png");
    float: right;
}
​

フィドラーとして簡単なデモを用意しました。

アイコンがテキストの下に配置されないようにするにはどうすればよいですか？

4

1 に答える 1

2

ellipsis後に配置された要素を無視して、テキストが使用可能なスペースに収まるように見えます。IMHOは賢明な設計です。要素がいくつあるか、とにかく改行が発生するかどうかがわからないためです。

解決策は、アイコンをテキストの外側span、ラッパーに配置することです。widthまた、ホバーのテキストを短くして、スペースを空ける必要があります。

#wrapper:hover #text {
    background-color: goldenrod;
    width: 74%;
}
#wrapper:hover:after {
    content: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/48x48/playback_play.png");
    float: right;
}

これが実際のデモです。テキスト（金色）と一緒に[表示]するアイコンが必要な場合は、別のネストされたラッパー（このように）を作成する必要があると思います。

于 2012-12-22T21:40:57.830 に答える