CSS 文本溢出省略号不显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9931542/
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
CSS Text-overflow Ellipsis Not Displaying
提问by sadmicrowave
I have a div with some inner content that I need to have an ellipsis when it overflows. I've done this many times on other elements but for some reason this is not behaving as expected.
我有一个带有一些内部内容的 div，当它溢出时我需要一个省略号。我已经在其他元素上多次这样做了，但由于某种原因，这没有按预期运行。
Also, I left white-space:nowrap;out on purpose because the content then does not break to the next line within the span, as a result I only see 2-3 words before the ellipsis starts. I would like the text to span the entire height of the parent container then have the ellipsis start for content that exists beyond those bounds.
另外，我white-space:nowrap;故意遗漏了，因为内容不会在跨度内中断到下一行，因此在省略号开始之前我只看到 2-3 个单词。我希望文本跨越父容器的整个高度，然后为超出这些边界的内容使用省略号开头。
Here is a working Demo: http://jsfiddle.net/sadmicrowave/DhkSA/
这是一个工作演示：http: //jsfiddle.net/sadmicrowave/DhkSA/
CSS:
CSS：
.flow-element{
position:absolute;
font-size:12px;
text-align:center;
width:75px;
height:75px;
line-height:70px;
border:1px solid #ccc;
}
.flow-element .inner{
position:absolute;
width:80%;
height:80%;
border:1px solid blue;
top:0px;
bottom:0px;
left:0px;
right:0px;
margin:auto;
text-align:center;
}
.flow-element .long{
float:left;
height:50px;
width:100%;
line-height:12px;
border:1px solid red;
text-overflow:ellipsis;
overflow:hidden;
}
HTML:
HTML：
<a class='flow-element' style='top:100px; left:50px;'>
<div class='inner'>
<span class='long'>Box 1 and some other content that should wrap and do some other stuff</span>
</div>
</a>
Can someone please help. I need to display as much text as possible within the red outlined span while having an ellipsis when text content overflows the container...
有人可以帮忙吗。我需要在红色轮廓跨度内显示尽可能多的文本，同时在文本内容溢出容器时出现省略号...
Thanks in advance
提前致谢
回答by Saket Patel
you can't apply text-overflow: ellipsisto inline elements (span), it can be used with block elements only (div)
您不能应用于text-overflow: ellipsis内联元素 (span)，它只能用于块元素 (div)
and also use white-space:nowrap;when using text-overflow: ellipsis;
并在使用white-space:nowrap;时使用text-overflow: ellipsis;
check this, i have converted your inner span to div, just for proof of concept
检查这个，我已经将你的内部跨度转换为 div，只是为了证明概念
i don't know why you have used span, but as per your logic you can make changes as i suggested
我不知道你为什么使用跨度，但根据你的逻辑，你可以按照我的建议进行更改
Update:
更新：
someone will think that in the question if i put white-space: nowrap;to span element then the text-overflow: ellipsis:is working so may be i am wrong, but it is not the case because questioner has used float: leftin the span tag that means the span tag will be converted to a box block and work like a normal block level element, which is also wrong thing to do because if you need the block element behavior then use a block level element
有人会认为在问题中，如果我放入white-space: nowrap;span 元素，那么它text-overflow: ellipsis:正在工作，所以可能是我错了，但事实并非如此，因为提问者float: left在 span 标签中使用了这意味着 span 标签将被转换为框块并且像普通的块级元素一样工作，这也是错误的做法，因为如果您需要块元素行为，请使用块级元素
Reference:
参考：
http://www.w3.org/TR/CSS2/visuren.html#propdef-float
http://www.w3.org/TR/CSS2/visuren.html#propdef-float
回答by huzzah
Add white-space:nowrap;to your .inner div.
添加white-space:nowrap;到您的 .inner div。
回答by Sven Bieder
Add this:
添加这个：
white-space:nowrap;
to .flow-element .long
到 .flow-element .long
then the overflow-ellispsis works.
然后溢出省略号起作用。
回答by Peter Presnell
I think you will find the problem is caused by having text-align: center;
我想你会发现问题是由 text-align: center; 引起的。
