Работает ли CSS-переполнение текста: многоточие работает с тегами Anchor?

Почему следующий CSS не работает?

a {
    width: 60px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Ответ 1

Это потому, что якоря являются стандартными, inline элементами. Добавление display:inline-block приведет к тому, что вышеуказанный код будет работать.

Ответ 2

Это для модели box, display:block выполнит задание

a {
    width: 60px;
    display:block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Но это может вызвать другие проблемы, связанные с тем, что привязка (встроенный элемент) ведет себя как элемент модели окна (display: block).

Ссылка: переполнение текста

Update:

display:inline-block

Демо.

Ответ 3

Добавьте display: block в ваш css.