我創建了一個包含一些帶有一些簡單 CSS 的文本的 div：
.textBox {
display: inline-block;
font-size: 50px;
}
容器很簡單：
<div class="textBox"> Test </div>
然而，文本在 div 中并沒有完全垂直居中。上面有13px，下面有11px。因此，我希望 div 的高度與文本的高度完全相同。
uj5u.com熱心網友回復：
所以這很難。正如很多人建議的那樣，您應該考慮一下line-height。但問題是默認的樣式規則不知道你要使用什么字母。例如，是否有像 M 這樣的普通大寫字母，或者您可能會使用像 ? 這樣的大寫字母，那么它需要更大，對嗎？或者 Q，它需要更低。
在這種情況下沒有任何 shrink-to-text 屬性真的太糟糕了。也許 line-height 和一些試驗和錯誤對你來說就足夠了。
.textBox {
display: inline-block;
background-color: darkcyan;
font-size: 50px;
line-height: 0.68em;
}<div class="textBox">Test</div>不確定您的預期結果應該是什么。但是，如果您想突出顯示文本，即使行高也不精確。在那種情況下，我會回傳一個輔助標記，我將設定樣式以填充文本后面的背景。不過代碼有點多，如示例中所示，對于每種字體，您需要再次找到正確的設定。
/* Setup textBox properties */
.textBox {
display: inline-block;
position: relative;
}
.textBox{ font-size: 50px; }
.textBox:hover{ font-size: 200px; }
/* Setup default properties for the marking*/
mark{
background-color: darkcyan;
position: absolute;
z-index: -999;
}
/* Specific setting first font-family */
.serif{
font-family: serif;
}
.serif mark {
height: 0.68em;
top: 0.25em;
left: 0.03em;
width: calc(100% - 0.03em);
}
/* Specific setting second font-family */
.sans-serif{
font-family: sans-serif;
}
.sans-serif mark {
height: 0.73em;
top: 0.2em;
left: 0.08em;
width: calc(100% - 0.08em);
}
/* Specific setting last font-family */
.verdana{
font-family: Verdana, sans-serif;
}
.verdana mark {
height: 0.94em;
top: 0.28em;
right: 0.09em;
width: calc(100% - 0.09em);
}<div class="textBox serif">
<mark></mark>
Test
</div>
<br>
<br>
<div class="textBox sans-serif">
<mark></mark>
Meet
</div>
<br>
<br>
<div class="textBox verdana">
<mark></mark>
Testing
</div>uj5u.com熱心網友回復：
您可以使用：
height: fit-content;
像這樣：
.textBox {
display: inline-block;
font-size: 50px;
height: fit-content;
}
uj5u.com熱心網友回復：
使用屬性 height : fit-content ; 到股利
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/534734.html
標籤：网页格式CSS