15

この質問は決して悲惨ではありませんが、私が遭遇した問題であり、SO の専門家の何人かがどのように解決するのか疑問に思っていました-解決策がある場合.

ファイル情報を表示する固定幅の UI ウィジェットがあります。:hoverファイル名をクリックして編集し、フォントの色を変更するスタイルが適用されていることを示す機能を提供しています。もともと私はファイル名を 内に入れましたDIVが、ファイル名が異なると長さが異なるDIVため、 をファイル名に合わせてサイズを変更し、:hover効果をテキストに密着させることはできません。短いファイル名を:hover使用すると、カーソルがDIV. これは私が望んでいたものではなかったので、解決策としてファイル名をSPAN（効果とともに:hover）内に入れました。これにより、短いファイル名の問題は解決されましたが、長いファイル名が楕円で適切にオーバーフローすることはありませんでした。

理想的には、両方の効果を実現するソリューションが必要です-長いファイル名を:hover省略し、実際のテキストにカーソルを合わせたときにのみ効果を適用します。私はまだcssにかなり慣れていないので、明らかな答えが欠けているだけかもしれません。ありがとう！

問題を示すページの例を次に示します:
(およびjsfiddleで)

編集: JavaScript マジックを実行して長い名前を切り取ることができると考えましたが、より単純な css ソリューションを望んでいました。

<html>
<head>
<style>
    div {
        margin:10px;
        width:200px;
        max-width:200px;
        font-size:1.2em;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    div.a:hover, span:hover {
        color:666;
        cursor:pointer;
    }
    span {
        display:inline-block;   
    }
</style>
</head>
<body>

    <!-- This works well for long filenames -->
    <div class="a">
        ThisIsMyReallyReallyLongFilename.txt
    </div>

    <!-- ... but fails for the short names -->
    <div class="a">
        Shortname.txt
    </div>

    <!-- This fails to show ellipse for long filenames -->
    <div>
        <span>ThisIsMyReallyReallyLongFilename.txt</span>
    </div>

    <!-- ... but wraps the text nicely for short names -->
    <div>
        <span>Shortname.txt</span>
    </div>

</body>
</html>
4

3 に答える 3

24

このような？display:inline-block;(スパンからの削除に注意してください。)

<html>
<head>
<style>
div {
    margin:10px;
    width:200px;
    max-width:200px;
    overflow: hidden;
    text-overflow:ellipsis;
    font-size: 1.2em;
}
span:hover {
    color:666;
    cursor:pointer;
}
</style>
</head>
<body>

<!-- This now does show ellipse for long filenames -->
<div>
    <span>ThisIsMyReallyReallyLongFilename.txt</span>
</div>

<!-- ... but wraps the text nicely for short names -->
<div>
    <span>Shortname.txt</span>
</div>

</body>
</html>
于 2012-04-18T21:13:42.417 に答える
2

この問題は、実際にはSPANwithを持つことに起因しdisplay:inline-blockます。それを削除するか、この jsFiddle の行に沿って何かに更新する必要があります。あなたが持っている例に基づいて、何に変更すべきか正確にはわかりません。

SPAN親がオーバーフローしないため、これが発生していると思いますDIV。 少なくとも、これがトリガーされると W3 仕様で述べられている方法です。

于 2012-04-18T21:08:12.227 に答える
2

overflowとtext-overflowプロパティをルールから と の両方をdiv対象とする新しいルールに移動します。最大幅を追加します。divspan

<html>
<head>
<style>
    div, span {
        overflow:hidden;
        text-overflow:ellipsis;
        max-width:200px;
    }
    div {
        margin:10px;
        width:200px;
        font-size:1.2em;
    }
    div.a:hover, span:hover {
        color:#666;
        cursor:pointer;
    }
    span {
        display:inline-block;   
    }
</style>
</head>
<body>

    <!-- This works well for long filenames -->
    <div class="a">
        ThisIsMyReallyReallyLongFilename.txt
    </div>

    <!-- ... but fails for the short names -->
    <div class="a">
        Shortname.txt
    </div>

    <!-- This fails to show ellipse for long filenames -->
    <div>
        <span>ThisIsMyReallyReallyLongFilename.txt</span>
    </div>

    <!-- ... but wraps the text nicely for short names -->
    <div>
        <span>Shortname.txt</span>
    </div>

</body>
</html>​
于 2012-04-18T21:12:10.493 に答える