Question

我有以下列表（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>

.parent和.child都有display: block，只有.child上有overflow: hidden。

由于某种原因，它仍会导致列表项的项目符号消失，当我删除overflow: hidden时它会重新出现。我必须将它添加到孩子身上以对其应用text-overflow。

任何提示，技巧或一些信息都会受到赞赏，请注意，将项目符号放在列表项中并不会对我的具体情况有所帮助，我试图不添加不必要的标记以保持我的代码语义

Answer 1

转身就是使用counter CSS：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

溢出时列表项目符号消失：隐藏不在列表项本身上

1 个答案: