overflow:hidden on div in ordered list affects li, Chrome bug?

Question

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?

Do you require overflow:hidden on the div? Is this necessary. If you remove it you can see the number in chrome. — lharby, May 12 '15 at 15:10
@lharby This was simplified from code that has 2 divs in the li, and involves `text-overflow: ellipses` — Izkata, May 12 '15 at 15:11
@LuisP.A. All that does is set it to use numbers, which is the same as the default for `
` — Izkata, May 12 '15 at 15:16
It depends how you want to attack it then, would a js solution be OK? I use this http://rafael.adm.br/css_browser_selector/ it adds a class to the html which allows you to write vendor specific css. so .firefox ol { //your code here }, modernizr also uses this technique, but that might be very heavy. Otherwise I suppose you might need a conditional stylesheet. Was looking here but it's quite dirty: https://css-tricks.com/snippets/css/browser-specific-hacks/ — lharby, May 12 '15 at 15:18
@Izkata..sometimes we need to force the style...this is why -http://stackoverflow.com/questions/11737266/what-is-default-list-styling-css . just a precaution. — Luís P. A., May 12 '15 at 15:21

score 3 · Accepted Answer · answered May 12 '15 at 15:26

3

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

answered May 12 '15 at 15:26

insertusernamehere

23,204
9
87
126

..this has me going WTF even more, but it works completely. Firefox and Chrome both look the same now. – Izkata May 12 '15 at 15:32
So I undid this and added some text in the
but outside the "overflow:hidden" div, and the number for that
reappeared. Does Chrome/Webkit have some secret psuedo-property akin to IE's `hasLayout`, that "overflow:hidden" undoes?

Izkata

May 12 '15 at 15:37

1

Basically my solution does excactly what you have done manually by inserting some content. It seems that Webkit has a problem, when only block-level elements (even `inline-block` is working) with `overflow:hidden;` appear. My answer is a workaround to add some invisible content, without destroying the layout. – insertusernamehere May 12 '15 at 15:42

In my case, I solved this problem by adding `list-style-position: inside` on list block – pkirilin Jan 12 '22 at 08:53

score 1 · Answer 2 · answered May 12 '15 at 15:12

1

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>

answered May 12 '15 at 15:12

Stewartside

20,378
12
60
81

The number should be on the `li`, though, not the div AFAIK. And the `overflow: hidden` is intentionally on the div, to use `text-overflow: ellipses` in the original – Izkata May 12 '15 at 15:15
It really depends on how the browser renders. A block level element is 100% of the width and clears both left and right. Chrome obviously interprets that within an `li` differently to FireFox. – Stewartside May 12 '15 at 15:21
The list marker exists separately from the principal box when list-style-position is outside. See the [propdef](https://www.w3.org/TR/CSS22/generate.html#propdef-list-style-position) and my answer to the duplicate question. So technically the list marker isn't overflowing the div, because it's not a descendant of the div in the first place, and therefore clipping should not be happening. If Chrome is making the list marker a descendant of the div, then Chrome is wrong. – BoltClock Jan 02 '17 at 15:58

tojowe · Answer 3 · 2015-05-12T15:39:15.807

0

If you need to use the div inside li, display the div as inline, otherwise list-style: inside will work.

ol {
  list-style-position: outside;
}

div {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 150px; display: inline;
}

<ol>
    <li><div>Some text</div></li>
</ol>

edited May 12 '15 at 15:39

answered May 12 '15 at 15:13

tojowe

101
1
8

`display: inline` won't work; I've edited the question with more of the original – Izkata May 12 '15 at 15:21
This works for the original post and edited and is a working solution for the revised question. Why the downvote? – tojowe May 12 '15 at 15:23

Dr Upvote · Answer 4 · 2015-05-12T15:41:40.263

0

Define selectors for these elements.

Your going to began to run into problems if your just using global tags: <li> <div> especially since your nesting here.

eg:<li class="dothis"> <div class="thisdivdoes"> ...

After you do this it would be easier to differentiate overflow:hidden; where and not where.

Since your tag is within your <li> define what you want them to do individually since that's what you want to do, or else you may see them inherit each other as your experiencing.

Also, check your doctype in HTML5 I think it's not valid while in strict it may be.

edited May 12 '15 at 15:41

answered May 12 '15 at 15:32

Dr Upvote

8,023
24
91
204

The question is a [simplified example](http://stackoverflow.com/help/mcve), it's nowhere close to what I'm actually using – Izkata May 12 '15 at 15:33

overflow:hidden on div in ordered list affects li, Chrome bug?

4 Answers4

Linked

Related