如何在隐藏溢出时保留列表号？

我有一个HTML有序列表，其中的项目包含一个简短的“名称”和一个长的“信息”，我只想显示第一部分，以便项目只使用一行，有点像截断预习。下面的图片展示了所希望的效果：如何在隐藏溢出时保留列表号？

Demonstration of preview effect

我基本上可以通过使用下面的HTML/CSS达到的效果;然而，名单号码消失！参见this jsFiddle进行演示。

这是我尝试代码：

.name { font-weight: bold; } 
 
.info { color: #ccc; } 
 

 
li { /* Why do the LI numbers disappear? */ 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    width: 500px; 
 
}

<ol> 
 
    <li><span class="name">Foo</span>: <span class="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lobortis ligula quis mi ultrices fringilla. Suspendisse sed commodo magna. Curabitur cursus non tellus vel dapibus. Integer facilisis sollicitudin velit vel aliquet. Aenean sit amet leo id neque suscipit volutpat sed blandit metus.</span></li> 
 
    <li><span class="name">Bar</span>: <span class="info">Nullam non posuere tortor. Sed facilisis nibh et maximus interdum. Vivamus eleifend lectus varius rutrum vehicula. Ut sit amet dictum tortor, auctor fringilla nibh. Aenean imperdiet suscipit suscipit. Sed a ex eu purus dapibus venenatis. In ut orci eget libero sollicitudin mollis.</span></li> 
 
</ol>

我猜overflow: hidden指令是罪魁祸首，但它也是东西达到了预期的截断。任何想法如何在保留编号的同时只显示每个列表项的单个截断的文本行？

来源

2014-09-19 maerics

可以使用更改列表编号的位置：

.name { 
 
    font-weight: bold; 
 
} 
 
.info { 
 
    color: #ccc; 
 
} 
 
li { 
 
    /* Why do the LI numbers disappear? */ 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    width: 500px; 
 
} 
 
ol { 
 
    list-style-position:inside; 
 
}

<ol> 
 
    <li><span class="name">Foo</span>: <span class="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lobortis ligula quis mi ultrices fringilla. Suspendisse sed commodo magna. Curabitur cursus non tellus vel dapibus. Integer facilisis sollicitudin velit vel aliquet. Aenean sit amet leo id neque suscipit volutpat sed blandit metus.</span> 
 
    </li> 
 
    <li><span class="name">Bar</span>: <span class="info">Nullam non posuere tortor. Sed facilisis nibh et maximus interdum. Vivamus eleifend lectus varius rutrum vehicula. Ut sit amet dictum tortor, auctor fringilla nibh. Aenean imperdiet suscipit suscipit. Sed a ex eu purus dapibus venenatis. In ut orci eget libero sollicitudin mollis.</span> 
 
    </li> 
 
</ol>

来源

2014-09-19 14:50:26 j08691

这是一个很好的解决方案;但是，当列表中包含十个或更多项目时，由于列表项目数量的宽度不同，因此它们未正确左对齐。好悲伤，CSS = | – maerics 2014-09-19 15:03:25

如何在隐藏溢出时保留列表号？

回答

相关问题