代码之家 › 专栏 › 技术社区 › Murphy1976

列表项和保留编号的文本溢出省略号

html-lists css html

1

Murphy1976 · 技术社区 · 10 年前

This 是这个问题的衍生产品。我正在使用给出的答案中所示的技巧,但我希望保留开头的数字 ol li ,使用HTML/CSS,我有:

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>

数字(1.、2.、3.等)不再可见

2 回复 | 直到 9 年前

1

3

Benneb10 10 年前

显示块阻止显示数字。放置列表样式位置:内部;关于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>

2

0

G-Cyrillus 10 年前

LI 是 display:list-item; 通过defaut。这 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>