2

Размер обрезанного текста 108px, а весь блок принимает размер 112px

Имеется div на который навешаны стили overflow: hidden; text-overflow: ellipsis;white-space: nowrap;
После многоточия добавляется нежелательное пустое пространство в несколько пикселей, из-за чего не получается выровнять текст по правому краю. Размер текста 108px, а блок с этим текстом 112px, как переместить лишние 4px в левую часть блока или обойти добавление лишних px? Большое спасибо.

1

1 ответ 1

4

Похоже это зависит от шрифта.
Попробуйте использовать 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;.
Либо, если проблема всё таки связана с шрифтом, искать другой..

6
  • Кажется text-overflow: '..'; не работает. В вашем примере тоже. 13 ноя 2019 в 13:16
  • 1
    в хроме работает! 13 ноя 2019 в 13:54
  • 2
    @АлександрМанюнин, попробуйте не использовать IE (совсем) или обновить браузер.
    – De.Minov
    13 ноя 2019 в 14:33
  • @CbIPoK2513 получаю такой результат в хроме i.stack.imgur.com/U7jvO.jpg 13 ноя 2019 в 15:31
  • 2
    Фаерфокс работает
    – nick_n_a
    15 ноя 2019 в 8:00

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.