Имеется div на который навешаны стили overflow: hidden; text-overflow: ellipsis;white-space: nowrap;
После многоточия добавляется нежелательное пустое пространство в несколько пикселей, из-за чего не получается выровнять текст по правому краю. Размер текста 108px
, а блок с этим текстом 112px
, как переместить лишние 4px
в левую часть блока или обойти добавление лишних px? Большое спасибо.
-
2Добавьте минимальный воспроизводимый пример– InDevX13 ноя 2019 в 12:54
Добавить комментарий
|
1 ответ
Похоже это зависит от шрифта.
Попробуйте использовать text-overflow: '..'
.overflow {
display: inline-block;
max-width: 200px;
background: blue;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-align: right;
font-size: 200%;
}
.dot2 {
text-overflow: '..';
}
.dot3 {
text-overflow: ellipsis;
}
<div class="overflow dot2">Какой-то длинный текст</div>
<br>
<div class="overflow dot3">Какой-то длинный текст</div>
Странно что в Google Chrome не работает "кастомный" text-overflow
..
Тогда только "обрезать" при помощи overflow: hidden;
.
Либо, если проблема всё таки связана с шрифтом, искать другой..
-
Кажется text-overflow: '..'; не работает. В вашем примере тоже. 13 ноя 2019 в 13:16
-
1
-
2@АлександрМанюнин, попробуйте не использовать IE (совсем) или обновить браузер.– De.Minov13 ноя 2019 в 14:33
-
-
2