设置溢出隐藏li项目符号(溢出属性与列表样式冲突)

时间:2012-03-01 19:56:24

标签: css html-lists overflow

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

有人知道任何解决方案吗?

4 个答案:

答案 0 :(得分:1)

我很久以前就记得这个问题。是的,最好遵循@Diodeus建议的内容,但将padding-left添加到ul,奇迹般地解决了我的问题几次。

答案 1 :(得分:0)

在浏览器中使用CSS背景比使用自定义项目符号的list-style-image更可靠。控制列表图像的位置本身就很困难。

类似的东西:

.bullets {
  background-image:url(/img/bpt_clear.png); 
  background-repeat:no-repeat; 
  padding-left:30px; 
  margin-left:-30px;
}

请参阅:http://preview.moveable.com/JM/ilovelists/

答案 2 :(得分:0)

摆脱overflow-y:hidden;并为ul设置一个padding-left。如果列表显示在“外部”,则需要此选项。请尝试以下方法:

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

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

答案 3 :(得分:0)

您可以尝试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>