setting overflow hides li bullets (overflow property conflict with list-style)

问题

setting overflow and text-overflow property makes the li hide bullets. I've tried putting the bullets "inside" but it still didn't show bullets. Plus I'd prefer to put it "outside"

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

does anyone know any solution to this?

回答1:

Using a CSS background is much more dependable across browsers than using list-style-image for custom bullets. Controlling the position of a list-image is quite difficult on its own.

Something like:

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

See: http://preview.moveable.com/JM/ilovelists/

回答2:

I remember this problem long before. Yes, its better to follow to what @Diodeus suggests, but adding padding-left to the ul, miraculously solved my problem a couple of times.

回答3:

Get rid of overflow-y: hidden; and set a padding-left for ul. You need this if the list ist displayed "outside". Try the following:

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

回答4:

You can try list-style-position: inside; to fix it. Please check following snippet - if you try it with overfow: hidden and without list-style-position: inside it hides the images:

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>

来源：https://stackoverflow.com/questions/9523059/setting-overflow-hides-li-bullets-overflow-property-conflict-with-list-style

标签

css

html-lists

overflow