CSS文本溢出省略号不显示

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.

另外，我留下了白色空间：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

提前致谢

4 个解决方案

#1

you can't apply text-overflow: ellipsis to inline elements (span), it can be used with block elements only (div)

你不能将文本溢出：省略号应用于内联元素（span），它只能与块元素一起使用（div）

and also use white-space:nowrap; when using text-overflow: ellipsis;

并使用白色空间：nowrap;使用文本溢出时：省略号;

check this, i have converted your inner span to div, just for proof of concept

检查一下，我已将你的内跨度转换为div，仅用于概念验证

http://jsfiddle.net/3CgcH/5/

i don't know why you have used span, but as per your logic you can make changes as i suggested

我不知道你为什么使用span，但根据你的逻辑，你可以按照我的建议进行更改

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: left in 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

有人会认为，如果我把白色空间放入问题：nowrap;为了跨越元素然后文本溢出：省略号：正在工作所以可能是我错了，但事实并非如此，因为提问者在span标签中使用了float：left，这意味着span标签将被转换为一个框块并且像普通的块级元素一样工作，这也是错误的事情，因为如果你需要块元素行为，那么使用块级元素

Reference:

参考：

http://www.w3.org/TR/CSS2/visuren.html#propdef-float

http://dev.w3.org/csswg/css3-ui/#text-overflow

#2

Add white-space:nowrap; to your .inner div.

添加白色空间：nowrap;到你的.inner div。

#3

Add this:

添加这个：

white-space:nowrap;

to .flow-element .long

到.flow-element .long

then the overflow-ellispsis works.

然后溢出 - ellispsis工作。

#4

I think you will find the problem is caused by having text-align: center;

我想你会发现问题是由text-align：center引起的;

#1