DIV内のSPANはテキストオーバーフローを防ぎます：省略記号

この質問は決して悲しいことではありませんが、私は遭遇した問題です。DIV内のSPANはテキストオーバーフローを防ぎます：省略記号

ファイル情報を表示する固定幅のUIウィジェットがあります。私はそれをクリックして機能を示すためにファイル名を編集する機能を提供しています。:hoverスタイルを適用してフォントの色を変更しました。もともと私はDIVの中にファイル名を入れましたが、異なるファイル名は異なる長さなのでDIVをファイル名にサイズ変更することはできず、テキストには:hoverのエフェクトがぎこちなくなります。カーソルがDIVの空の部分の上にある場合、ファイル名が短いと:hoverエフェクトが表示されます。これは私が欲しかったのではなく、ファイル名を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>

出典

2012-04-18 randall

このようにしますか？（スパンから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-18 21:13:42 Scriptor

ARGH！私は何かばかげたことが分からないことを知っていた。私はその 'display：inline-block'プロパティも必要ありませんでした。これは決して削除しなかった別のデザインからの残されたものでした。（*恥ずべきで頭を振る*）それを指摘してくれてありがとう！ :-)そして、他の人たちのおかげで彼らの提案に感謝します。 – randall

あなたは大歓迎です:) – Scriptor

すごい！これは私の日を救った！ –

問題は、実際にdisplay:inline-blockとSPANを持っていることから来ています。削除するか、something along the lines of this jsFiddleに更新する必要があります。私はあなたが持っている例に基づいてどのように変更すべきかを正確には不明です。

SPANが親のDIVをオーバーフローさせないため、これが発生していると思います。 At least that's how the W3 spec states this gets triggered.

出典

2012-04-18 21:08:12 scottheckel

は divと spanの両方を対象とし、新たなルールに divルールから overflowと text-overflowプロパティを移動し

。最大幅を追加します。

<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-18 21:12:10 brentonstrine

HexxagonalのリンクがjsFiddleであることは同じ溶液は私です、彼はちょうどスパンに代わり、最大幅の100％の幅を与える基本的です。しかし、同じ概念ですが、 'inline-block'になるには幅に幅が必要です。 – brentonstrine

DIV内のSPANはテキストオーバーフローを防ぎます：省略記号

答えて

関連する問題