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

Question

我有一个HTML有序列表，其中的项目包含一个简短的＆＃34;名称＆＃34;和长期的信息＆＃34;其中我只想显示第一部分，以便项目只使用一行，有点像截断的预览。下图显示了所需的效果：

我可以通过使用下面的HTML / CSS基本上达到效果;但是，清单编号消失了！有关演示，请参阅this jsFiddle。

这是我尝试过的代码：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我猜测overflow: hidden指令是罪魁祸首，但它也是实现所需截断的原因。任何想法如何在保留编号的同时每个列表项只显示一个截断的文本行？

Answer 1

您可以使用以下方式更改列表编号的位置：

.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>