Эллипсис CSS со встроенными элементами?

Я адаптировал jQuery UI MultiSelect Widget так, чтобы текст отображал все выбранные метки, но если для отображения выбрано слишком много элементов, текст будет обрезан и эллипс. Я сделал это так:

.ui-multiselect .selected-text {
    display: block;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Единственное, что мне не нравится в этом решении, это то, что мне пришлось установить display: block to element (span). Без него параметр width игнорировался, а диапазон расширялся до размера текста.

Можно ли использовать многоточие для работы с встроенными элементами (без изменения display на block)? Если да, то как это достичь?

Ответы

Ответ 1

Существует опция display которая работает в качестве промежуточного дома между inline и block, предназначенными для такого рода ситуаций...

он назывался

display:inline-block;

Используйте это вместо block, и ваш элемент все равно будет поступать в ваш контент, как если бы он был inline, но будет действовать как block для его содержимого, что означает, что ваш эллипсис должен работать.