Используйте многоточие, чтобы скрыть переполнение, но также разрешите перенос слов, если есть вертикальное пространство. ⇐ CSS

[Anonymous]

У меня есть поля разных размеров, и я хочу, чтобы в них отображалось имя как можно лучше.
Вот код, который я использую в целях тестирования:

Код: Выделить всё

    div {
display:flex;
background:yellow;
border: 2px solid orange;
box-sizing: border-box;
height:30px;
width:100px;
vertical-align:middle;
justify-content:center;
align-items:center;
text-align:center;
overflow:hidden;
text-overflow:ellipsis;
margin:20px;
}

div > span {
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

Код: Выделить всё

Short Name

Long Name, very very long Name

This will not fit and should be ellipsed like "T..."

В этой версии мне очень нравится, как очень короткое "Т... "отображается. Имеет смысл обрезать очень короткие поля после первой такой буквы. Однако в среднем будет достаточно места для переноса и отображения.
Если я удалю пробел:nowrap, то средний будет выглядеть хорошо, а вот нижний выглядит очень плохо (отображается что-то вроде «а...» из середины имени вместо начала).
Есть ли способ объединить лучшее из обоих миров, чтобы нижняя отображалась как «T...», как в первой скрипке, а средняя переносилась, как во второй скрипке? (Верхнее поле выглядит одинаково хорошо в обеих версиях, полное имя в центре)
jsfiddle 1 (с пробелами:nowrap)
jsfiddle 2 (без пробелов:nowrap)

Чтобы уточнить, желаемым результатом будет что-то вроде этого:



Подробнее здесь: https://stackoverflow.com/questions/790 ... s-vertical