List bullets disappears while overflow: hidden is not on the list item itself

Question

I have the following list (example):

<ol>
  <li>Item</li>
  <li>Item</li>
  <li>
    <span class="parent">
      <span class="child">Nested span with overflow: hidden</span>
    </span>
  </li>
  <li>Item</li>
  <li>Item</li>
</ol>

Both .parent and .child have display: block, only the .child has overflow: hidden applied on it.

For some reason it still causes the list item's bullet to disappear, it reappears when I remove the overflow: hidden. I must add it to the child to apply text-overflow on it.

Any tips, tricks or a bit of info would be appreciated, note that positioning the bullets inside the list items won't help in my specific case and I'm trying not to add unnecessary markup in order to keep my code semantic.

Is there a reason not to use `
` in place of ``? That would make them display block by default. If you set the width of the child to some strictly defined value you should be able to hide text that goes outside of the defined width. — ellitt, Mar 23 '16 at 18:07
From another answer: http://stackoverflow.com/questions/30194748/overflowhidden-on-div-in-ordered-list-affects-li-chrome-bug. — ellitt, Mar 23 '16 at 18:10
The reason I use `span` relates to the actual code I'm working on, though changing it to `div` won't solve the problem anyhow. I also can't set the width since it suppose to be a fluid component. — iMoses, Mar 23 '16 at 18:10
Interesting, they are creating a 1px high block element before the actual element, the issue seems to happen only when the top block element contains an `overflow: hidden`. — iMoses, Mar 23 '16 at 18:14
What about setting `list-style-position:inside;` on the list? — j08691, Mar 23 '16 at 18:17
@j08691 As I wrote: "note that positioning the bullets inside the list items won't help in my specific case". It will break the design of the system I'm working on. — iMoses, Mar 23 '16 at 18:19
@j08691 list bullet inside breaks in Firefox .. block elements break the line before to show... counter-css and :before allows them to float and not breaking a line if childs are block elements :) see by yourself with FF https://jsfiddle.net/socfbb76/2/ — G-Cyrillus, Mar 23 '16 at 18:23
I was really hoping not to use counter, it's a bit ugly :) Anyhow, adding `:before` to the `li` with a 1px block does the trick. It's still ugly, but with less lines of code :) — iMoses, Mar 23 '16 at 18:25
it is CSS 2.1 and well inplemented ... that is actually a classic use . Ugly !? why not, but not obsolete ... — G-Cyrillus, Mar 23 '16 at 18:27
True, it's not a patch, it will even work on IE6 - if for some weird reason anyone still cares - but it does require you to define the entire style from scratch. If I can use the browser's default styling in this case than I'd rather. — iMoses, Mar 23 '16 at 18:31
the counter css allows much more possibilities (style: bg, fonts,color, ..) or keep incrementing from an ol to another without playing with the start attribute :) the 1px height looks to me like a trick, where counter is not a trick, just a css use ;) but each has his own opinion , your choice. some day hoppefully these new bugs will be cured :) — G-Cyrillus, Mar 23 '16 at 18:34

score 1 · Answer 1 · answered Mar 23 '16 at 18:21

The turn around would be to use counter CSS:

ol {
  counter-reset:ol-li;
  }
li {
counter-increment:ol-li;
  display:block;
  }

li:before {
  content:counter(ol-li)'. ';
  float:left;
  width:1em;
  text-align:right;
  margin-right:0.25em;
  }
.parent {
  display: block;
}

.child {
  display: block;
  overflow: hidden;
}

<ol>
  <li>Item</li>
  <li>Item</li>
  <li>
    <span class="parent">
      <span class="child">Nested span with overflow: hidden</span>
    </span>
  </li>
  <li>Item</li>
  <li>Item</li>
</ol>

https://jsfiddle.net/socfbb76/1/

List bullets disappears while overflow: hidden is not on the list item itself

1 Answers1