Часть букв ниже базовой линии становится невидимой, если обрезать текст по `overflow`,` white-space` и `text-overflow` - PullRequest
0 голосов
/ 09 марта 2020

Шрифт по умолчанию зависит от браузера, поэтому в среде Windows / Chrome я заметил, что для сокращения текста на overflow, white-space, text-overflow часть текста, подчеркнутая ниже, становится невидимой.

Для font-size: 14px и line-height: 14px все буквы почти видны, только часть буквы g обрезана. Для font-size: 12px и line-height: 12px видимость хуже: нижняя часть j и g обрезана:

.test1{
  width: 200px;
  font-size: 14px;
  line-height: 14px;
  background: lightsalmon;
  
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.spacer{
  height: 30px;
}

.test2{
  width: 200px;
  font-size: 12px;
  line-height: 12px;
  background: lightsalmon;
  
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
<div class="test1">jane glad TestThatVerHardToBreakAlasdfjsdfjkjsdfjkosdfjoisdfjiosdfijdsfijowioqjrfiwqjfiw</div>

<div class="spacer"></div>

<div class="test2">jane glad TestThatVerHardToBreakAlasdfjsdfjkjsdfjkosdfjoisdfjiosdfijdsfijowioqjrfiwqjfiw</div>

Конечно, если мы изменим высоту строки, текст станет полностью видимым. Но:

  1. Я не хочу менять line-height: 1; для однострочных элементов.
  2. Даже если мне нужно изменить высоту строки, мне нужно провести несколько экспериментов, чтобы выбрать значение высоты строки, такое как текст, будет полностью видимым. Таким образом, значение высоты строки будет жестко задано.

Здесь есть какое-то решение, которое не зависит от размера шрифта и высоты строки?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...