CSS文本溢出省略号不显示
我有一些内部的div,当溢出时我需要省略号。我在其他元素上做过这么多次,但由于某种原因,这不像预期的那样。CSS文本溢出省略号不显示
另外,我故意留下了white-space:nowrap;
,因为内容不会突破到范围内的下一行,因此在省略号开始前我只看到2-3个单词。我希望文本跨越父容器的整个高度,然后使用省略号开始存在超出这些边界的内容。
这里是一个工作演示:http://jsfiddle.net/sadmicrowave/DhkSA/
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:
<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>
能有人帮。我需要显示红色边框跨度内尽可能多的文本可能同时具有当文本内容溢出容器中的省略号......
在此先感谢
你不能申请text-overflow: ellipsis
内联元素(跨度),它可以与块元素只能使用(DIV)
,并使用text-overflow: ellipsis;
检查这个时候使用white-space:nowrap;
,我已经将您内部跨度的div只是概念验证
我不知道为什么你已经使用范围,但按照你的逻辑,你可以让昌ES我建议
更新:
有人会认为,在这个问题,如果我把white-space: nowrap;
跨越元素则text-overflow: ellipsis:
的工作,所以可能是我错了,但事实并非如此,因为提问者在span标签中使用了float: left
,这意味着span标签将被转换为box块并像普通块级元素一样工作,这也是错误的,因为如果您需要块元素行为,则使用块级元素
参考:
添加white-space:nowrap;
您.inner股利。
添加您的建议确实会将省略号添加到文本中,但文本不会换行到内部元素的宽度。我需要展示尽可能多的文字,而不仅仅是2-3个单词...... – sadmicrowave 2012-03-29 18:57:14
是的,我注意到了这一点,并且正在研究一种解决方案,该解决方案将包装比一行更多...... – huzzah 2012-03-29 18:58:48
@sadmicrowave :你不明白文本溢出如何工作。你想看到更多?那么你必须扩大宽度。 – 2012-03-29 19:00:50
补充一点:
white-space:nowrap;
到流式细胞元。长
那么溢出ellispsis作品。
请参阅我对Heather Walters的相同解决方案的评论的评论。 – sadmicrowave 2012-03-29 18:59:06
我想你会发现问题是由文本对齐:center;
这是绝对错误的。内联元素非常好。 – 2012-03-29 18:57:33
那么为什么这个W3C草案说它适用于块只包含? http://dev.w3.org/csswg/css3-ui/#text-overflow – 2012-03-29 19:20:19
也检查这个答案http://*.com/a/9924984/1237812 – 2012-03-29 19:21:45