Menu
I'm inclined to think this is a bug in Chrome (why would a style on a child element affect the parent?), but there might be something else going on that I'm not understanding.
The ordered list below has 1 item, which in Firefox and IE10 is numbered (although in IE, it's positioned wrong). In Chrome though, the number is hidden entirely.
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>What's going on/is this a bug/can this be worked around?
636
overflow:hidden prevents scrollbars from showing up, even when they're necessary. Explanation of your CSS: margin: 0 auto horizontally aligns the element at the center. overflow:hidden prevents scrollbars from appearing.
It is because you are using position absolute. You cannot use position absolute with overflow hidden, because position absolute moves the targeted element out of context with the document structure.
To change this, set the min-width or min-height property.” This means that a flex item with a long word won't shrink below its minimum content size. To fix this, we can either use an overflow value other than visible , or we can set min-width: 0 on the flex item.
Use overflow-x : hidden and overflow-y : scroll , or overflow: hidden scroll instead. Use overflow: clip instead. As of Firefox 63, -moz-scrollbars-none , -moz-scrollbars-horizontal , and -moz-scrollbars-vertical are behind a feature preference setting.
Well, this is a kind of a hack, but it works. Adding a pseudo :before-element brings back the list style, as the li will have some content now. Bring back the div to the top and it looks like nothing has changed.
CSS
ol > li:before {
content: '';
display: block;
height: 1px;
}
div {
margin-top: -1px;
}
Demo
Try before buy
129
This isn't a bug so to speak, more of a difference in how different browser engines render the CSS. (Blink vs Trident vs Gecko vs WebKit etc)
Technically speaking, the Chrome display is correct due to hiding everything outside of the div as specified with overflow: hidden;.
If you use the Chrome Inspector, you can see where the edges of the elements are and the number is outside of that area.
Your best work-around would be to set an additional piece of CSS to override the main div element.
ol {
list-style-position: outside;
}
div {
overflow: hidden;
}
ol div {
overflow: visible;
}<!doctype html>
<html>
<body>
<ol>
<li>
<div>Some text</div>
</li>
</ol>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
