Установка многоточия переполнения текста для плавающего левого div или списка

Question

Вот что я хотел бы сделать:

• Создать список, который занимает столько места (по горизонтали), сколько необходимо (т. Е. Самый длинный элемент списка.

• Если список не помещается на странице, обрежьте текст списка и отобразите многоточие.

Я использую комбинацию white-space:nowrap и text-overflow:ellipsis. Он нормально работает для обычного списка, но в этом случае список занимает всю ширину страницы.

Чтобы заставить его занимать столько места, сколько нужно, я применил float:left, но это нарушает переполнение текста.

Пример:

<ol style="border:1px solid red;font-size:100px;">
    <li style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">Long list item. Ellipsis works.</li>
</ol>

<ol style="float:left;border:1px solid red;font-size:100px;">
    <li style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">Float left list. No ellipsis here.</li>
</ol>

Живой пример: http://jsfiddle.net/73M7G/1/

Answer 1

, поскольку плавающий элемент не наследует размер от своего контейнера,

вам нужно указать ширину :; на тоже!

http://jsfiddle.net/73M7G/3/

тест с шириной: 100%;

еще один тест http://jsfiddle.net/73M7G/6/

Answer 2

Предлагаю сделать список встроенным блоком, посмотреть его в действии здесь http://jsfiddle.net/73M7G/4/