Question

This是此问题的衍生产品。我正在使用给出的答案中说明的技术，但我希望在Measurement的开头保留数字，并使用我的HTML / CSS：

ol li

ol.songlist > li {
  width: 50%;
  float: left;
  padding: 10px 0;
  display: block;
}
.songlist > li > a {
  width: 125px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

数字（1.，2.，3等）不再可见

Answer 1

显示块阻止显示数字。放置list-style-position：inside;关于li元素

ol.songlist > li {
    width: 50%;
    float: left;
    padding: 10px 0;
   list-style-position:inside;       
}

.songlist > li > a {
   width: 125px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

<ol class="songlist">
   <li><a href="linktoURL">Song Title</a></li>
   <li><a href="linktoURL">Song Title</a></li>
   <li><a href="linktoURL">Song Title</a></li>
   <li><a href="linktoURL">Song Title</a></li>
   <li><a href="linktoURL">Song Title</a></li>
</ol>

Answer 2

通过defaut

LI为display:list-item;。此display值会生成数字或圆，方，......

如果您将li重置为block，则不再显示list-item。

ol.songlist > li {
  width: 50%;
  float: left;
  padding: 10px 0;
  /* display: block;*/
}
.songlist > li > a {
  width: 125px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<ol class="songlist">
  <li><a href="linktoURL">Song Title</a>
  </li>
  <li><a href="linktoURL">Song Title</a>
  </li>
  <li><a href="linktoURL">Song Title</a>
  </li>
  <li><a href="linktoURL">Song Title</a>
  </li>
  <li><a href="linktoURL">Song Title</a>
  </li>
</ol>

列表项的文本溢出省略号并保留数字

2 个答案: