html - 列表项内具有 "overflow: hidden"的 block 在 Edge 上向下移动

Question

这可以通过 Bilal Akil 在 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>

随附的 CSS:

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

在 Edge 上，内容显示如下，这对我来说像是一个错误:

在 li 中使用 overflow: hidden 时，有没有想过让内容与列表编号保持在同一行？

[编辑]:这个问题是关于处理 overflow: hidden inside a LI 的 block 。我很欣赏尝试通过将溢出移到 block 外来解决问题的答案，但我真正想要的是尊重此约束的解决方案。您还可以查看此 fiddle 以获得更高级的示例:http://jsfiddle.net/G46dK/7

Answer 1

如何制作 .overflow-hidden { display: inline-block; }？ http://jsfiddle.net/G46dK/8

.overflow-hidden {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  width: 100%;
}