CSS - максимальная ширина и эллипсы

Question

У меня есть диапазон, который будет содержать текст. Я бы хотел, чтобы диапазон увеличился до 500 пикселей, чтобы вместить текст внутри. После достижения максимума я бы хотел, чтобы текст отображал эллипсы для любого текста, превышающего максимальную ширину. Это возможно? Я попробовал следующее, но это не сработало.

Спасибо

{
    position: absolute;
    top: 13px;
    left: 44px;
    max-width: 500px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

Answer 1

Пределы отображаются: встроенные по умолчанию, что может вызвать странное поведение при назначении измерений. Если он позиционируется абсолютно в любом случае, вы должны использовать div или установить вместо span диапазон display: block.

Я не уверен, что это решит вашу проблему, но это только начало:)

---

Это интересная статья о том, как заставить многоточие работать во всех современных браузерах без использования JavaScript.

Answer 2

Этот javascript обрежет ваш текст и добавит многоточие. (Не нарушая его в середине слова или разметки)

Barelyfitz Truncate js .

Не уверен в совместимости браузера с i, но он должен работать :)

Надеюсь, это поможет.