Высота строки CSS не идет полностью вверх или вниз
У меня проблема, с которой я сталкивался много лет.
Текст с line-height: 1 будет компактным и достигнет верха и низа окружающих элементов.
Текст с другой высотой строки будет более читабельным, но в то же время он больше не будет доходить до верха и низа окружающих элементов.
Вот пример кода проблемы и хакерское решение. Изменение высоты строки или размера шрифта нарушит его.
Это надежное решение?
.wrap {
display: flex;
}
.first {
background: red;
width: 1rem;
}
.second,
.second2{
line-height: 2;
}
.second2 {
margin-top: -9px;
margin-bottom: -7px;
}<strong>Problem:</strong> The letter "A" does not align with the red top.<br><br>
<div class = "wrap">
<div class = "first"></div>
<div class = "second">A text that<br>spans on multiple rows</div>
</div>
<br><br>
<strong>Hackish fix:</strong> The letter "A" does align with the red top.<br><br>
<div class = "wrap">
<div class = "first"></div>
<div class = "second2">A text that<br>spans on multiple rows</div>
</div>Line-height доведен до предела, просто чтобы показать эффект.
@TemaniAfif Как еще можно выровнять текст по верхнему краю поля, если вам все еще нужна высота строки?
решение, которое я привожу выше. Более крепкого не вижу. Во всех случаях вам нужно иметь дополнительное свойство, чтобы исправить этот пробел. Вероятно, вы можете оптимизировать его, введя calc (), чтобы сделать его более универсальным.
Я думаю, что text-edge: text когда-нибудь будет поддерживать лучшее решение, но на данный момент все, что доступно, - это хакерское решение.
@Alohci Отличные новости! Значит, я все-таки не сумасшедший!
Ответы 1
Как вы заметили, если вы дадите элемент, содержащий текст:
font-sizeиз1emline-heightиз2em
текст будет отображаться в центре line-height по вертикали.
Текст по-прежнему будет иметь высоту 1em, но теперь над и под ним будет пространство 0.5em.
Чтобы (на первый взгляд, хотя и не на самом деле) противодействовать этому выравниванию по вертикали и середине, можно было бы применить
transform: translateY(-0.5em)
к элементу, содержащему текст.
Рабочий пример:
body {
display: flex;
}
.wrap-1,
.wrap-2,
.wrap-3 {
display: flex;
margin-right: 12px;
}
.first {
background: red;
width: 1rem;
}
.wrap-1 .second {
font-size: 1em;
line-height: 1em;
background-color: rgb(255, 255, 0);
}
.wrap-2 .second {
font-size: 1em;
line-height: 2em;
background-color: rgb(255, 255, 0);
}
.wrap-3 .second {
font-size: 1em;
line-height: 2em;
background-color: rgb(255, 255, 0);
}
.wrap-3 .second p {
background-color: rgba(0, 0, 0, 0.2);
transform: translateY(-0.5em);
}
p {
margin: 0;
padding: 0;
background-color: rgba(0, 0, 0, 0.2);
}<div class = "wrap-1">
<div class = "first"></div>
<div class = "second"><p>A text that<br>spans on multiple rows</p></div>
</div>
<div class = "wrap-2">
<div class = "first"></div>
<div class = "second"><p>A text that<br>spans on multiple rows</p></div>
</div>
<div class = "wrap-3">
<div class = "first"></div>
<div class = "second"><p>A text that<br>spans on multiple rows</p></div>
</div>Да, я думаю, вы прошли более половины пути. Я не использую em, а просто число. Я теперь прочитал, что число 2 в этом случае - это умножение размера шрифта на 2, так что это будет 2 * 1 rem в случае, если размер шрифта равен 1 rem. Я предполагаю, что функция calc сделает все возможное.
calc() звучит как хорошая идея. Вы, вероятно, сможете сделать даже больше, если объедините calc() с Настраиваемое свойство CSS или двумя.
Да, настраиваемое свойство font-size для предотвращения дублирования.
Я сомневаюсь, что есть надежное исправление (связанное с: stackoverflow.com/a/62303653/8620333). Кстати, это сделано намеренно, так почему вы хотите исправить то, что должно работать именно так?