DIV內部的SPAN可以防止文本溢出：省略號

這個問題絕不是可怕的，但這是我遇到的一個問題，它想知道一些SO專家如何解決它 - 如果有解決方案的話。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 2012-04-19 17:20:11

歡迎您:) – Scriptor 2012-04-19 17:25:25

Whe！這節省了我的一天！ – 2014-04-23 08:34:38

這個問題實際上來自SPAN與display:inline-block。您將需要刪除或更新到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規則overflow和text-overflow屬性，同時指定div和span新規則。添加最大寬度。

<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 2012-04-18 21:16:52

DIV內部的SPAN可以防止文本溢出：省略號

回答

相關問題