CSS DIV 内的 SPAN 可防止文本溢出：省略号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10217915/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SPAN inside DIV prevents text-overflow:ellipsis
提问by randall
This question is by no means dire, but it's a problem I've encountered and was wondering how some of the SO experts would solve it - if there is a solution.
这个问题绝不是可怕的，但这是我遇到的一个问题，并且想知道一些 SO 专家将如何解决它 - 如果有解决方案。
I have a fixed-width UI widget that displays file information. I'm providing the ability to edit the filename by clicking on it and to indicate that functionality I have a :hoverstyle applied to change the font color. Originally I put the filename within a DIV, but since different filenames are different lengths I can't size the DIVto the filename and keep the :hovereffect tight to the text. With short filenames the :hovereffect still displays when the cursor is over the empty part of the DIV. This wasn't what I wanted so as a solution I put the filename within a SPAN(along with the :hovereffect). That solved the problem for short filenames but prevented the long filenames from overflowing gracefully with an ellipse.
我有一个固定宽度的 UI 小部件，用于显示文件信息。我提供了通过单击文件名来编辑文件名的功能，并指示我:hover应用了一种样式来更改字体颜色的功能。最初我将文件名放在 a 中DIV，但由于不同的文件名长度不同，因此我无法DIV将文件名调整为文件名的大小并使:hover效果与文本紧密相关。对于短文件名，:hover当光标位于DIV. 这不是我想要的，因此作为解决方案，我将文件名放在 a 中SPAN（以及:hover效果）。这解决了短文件名的问题，但防止了长文件名用椭圆优雅地溢出。
Ideally I'd like a solution that achieves both effects - ellipse long filenames and apply the :hovereffect only when hovering over the actual text. I'm still pretty new to css so maybe I'm just missing an obvious answer. Thanks!
理想情况下，我想要一个能够实现两种效果的解决方案 - 椭圆长文件名并:hover仅在悬停在实际文本上时应用效果。我对 css 还是很陌生，所以也许我只是错过了一个明显的答案。谢谢！
Here is an example page showing the issues:
(and on jsfiddle)
这是一个显示问题的示例页面：（
以及在jsfiddle 上）
Edit: I figured I could perform some javascript magic to clip the longer names, but was hoping for a simpler css solution.
编辑：我想我可以执行一些 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>
回答by Scriptor
Like this? (Note the removal of display:inline-block;from the span.)
像这样？（注意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>
回答by brentonstrine
Move the overflowand text-overflowproperties from the divrule to a new rule that targets both divand span. Add a max-width.
将overflow和text-overflow属性从div规则移动到同时针对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>?
回答by scottheckel
The issue actually comes from having a SPANwith display:inline-block. You're going to need to either remove that or update it to something along the lines of this jsFiddle. I'm unclear exactly what it should be changed to based on the example that you have.
这个问题实际上来自有一个SPANwith display:inline-block。您将需要将其删除或将其更新为与jsFiddle 类似的内容。根据您的示例，我不清楚应该将其更改为什么。
I believe this is occuring because the SPANwill never overflow it's parent DIV. At least that's how the W3 spec states this gets triggered.
我相信这是因为SPAN它永远不会溢出它的 parent DIV。 至少 W3 规范说明这是如何触发的。
