css - 设置overflow隐藏li元素符号(overflow属性与list-style冲突)

Question

设置overflow和text-overflow属性使li隐藏元素符号。我尝试将子弹“放入”内部，但仍然没有显示子弹。另外我更喜欢把它放在“外面”

ul.hbox_poplist {
    list-style: circle url('/img/bpt_clear.png');
}

ul.hbox_poplist li {
    margin: 0 0 8px;
    max-height:32px;
    text-overflow: ellipsis;
    overflow-y: hidden;
}

有谁知道这个问题的解决办法吗？

Answer 1

您可以尝试list-style-position: inside; 来修复它。请检查以下代码片段 - 如果您尝试使用 overfow:hidden 且不使用 list-style-position: inside ，它会隐藏图像:

ul.checklist li {
   list-style-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMSIgaGVpZ2h0PSI4IiB2aWV3Qm94PSIwIDAgMTEgOCI+ICAgIDxwYXRoIGZpbGw9IiNGMTgwMTkiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTkuMTg0IDBMMy45MiA1LjM2OCAxLjI1NiAyLjc4MiAwIDQuMDgyIDMuOTUxIDcuOTJsNi41Mi02LjY1eiIvPjwvc3ZnPg==);
   overflow: hidden;
   list-style-position: inside;
}

<ul class="checklist">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>