-1

This can be observed with the code sample posted by Bilal Akil in this question:

http://jsfiddle.net/G46dK/

<ol>
    <li>
        <p>
            Moo
    <li>
        <p class="overflow-hidden">
            Moo
    <li>
        <p class="overflow-hidden">
            Moo
    <li>
        <p>
            Moo
</ol>

With the accompanying CSS:

p.overflow-hidden {
    overflow-x: hidden;
}

On Edge, the content displays as follow, which looks like a bug to me:

Display issues on Edge with overflow: hidden inside LI

Any idea to have the content remaining on the same line as the list number when using overflow: hidden inside the li?

[EDIT]: This question is about dealing with blocks with overflow: hidden inside a LI. I do appreciate answers that try to work around the problem by moving the overflow outside of the block, but what I am really after is a solution that respects this constraint. You may also check this fiddle for a more advanced example: http://jsfiddle.net/G46dK/7

Community
  • 1
  • 1
Gyum Fox
  • 3,287
  • 2
  • 41
  • 71

1 Answers1

2

How about making .overflow-hidden { display: inline-block; }? http://jsfiddle.net/G46dK/8

.overflow-hidden {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  width: 100%;
}
Michael Coker
  • 52,626
  • 5
  • 64
  • 64
  • This displays as intended... unless if the text in the list is very long. In that case, overflow: hidden seems to be ignored: http://jsfiddle.net/G46dK/13/ – Gyum Fox Jan 31 '17 at 09:24
  • Actually, adding width: 100% seems to do the trick: http://jsfiddle.net/G46dK/14/ (needs to be tested on more browsers though) – Gyum Fox Jan 31 '17 at 09:26
  • OK I tested it working on Edge 14, IE11, FF49, Chrome 55 with width: 100%. @Michael Coker: please amend your response, so I can accept it. – Gyum Fox Jan 31 '17 at 09:33