Шрифт по умолчанию зависит от браузера, поэтому в среде 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>
Конечно, если мы изменим высоту строки, текст станет полностью видимым. Но:
- Я не хочу менять
line-height: 1;
для однострочных элементов. - Даже если мне нужно изменить высоту строки, мне нужно провести несколько экспериментов, чтобы выбрать значение высоты строки, такое как текст, будет полностью видимым. Таким образом, значение высоты строки будет жестко задано.
Здесь есть какое-то решение, которое не зависит от размера шрифта и высоты строки?