我倾向于认为这是Chrome中的错误(为什么子元素上的样式会影响父元素?),但是可能还有其他我不了解的事情。
下面的有序列表有1个项目,在Firefox和IE10中编号(尽管在IE10中,位置错误)。但是在Chrome中,数字完全隐藏了。
ol {
list-style-position: outside;
}
div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 150px;
}
<ol>
<li>
<div>Some text that trails off</div>
</li>
</ol>
怎么回事/这是错误/可以解决吗?
嗯,这是一种破解,但是可以。添加伪:before
元素会返回列表样式,因为li
它将具有一些内容。回到div
顶部,似乎没有任何改变。
的CSS
ol > li:before {
content: '';
display: block;
height: 1px;
}
div {
margin-top: -1px;
}
演示版
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句