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可以防止文本溢出：省略号

回答

相关问题