<span>線高度的造型變化與瀏覽器突出

在標籤我改變行高搞亂：<span>線高度的造型變化與瀏覽器突出

<span class="text-header-huge" style="line-height: 90%;"> 
    XXX 
    <br> 
    XXX. 
</span>

它看起來不錯，但是當我強調我的瀏覽器的文字，這種情況

突出顯示應完全包裝文本。我該如何解決這個問題？

來源

2017-01-10 Russell C.

這通常是你的web字體的結果。你使用什麼webfont？如果刪除'line-height'，問題是否存在？ – Robotnicka

@Robotnicka我正在使用Web字體[Titillium Web]（https://fonts.google.com/specimen/Titillium+Web） –

這裏是[小提琴]（https://jsfiddle.net/855u2qyx/2/ ）問題 – zgood

我懷疑有一個簡單可行的解決方案這一點，因爲瀏覽器看起來根據字體大小設置選擇的高度 ......或者這只是我不懂事（我不是在這些事情上師）。

雖然如果你將文字分成一堆inline-block's，你可以選擇一些或多或少的東西。我的版本並不完美，但至少它突出了整行。希望它能幫助：https://jsfiddle.net/6ue441kz/69/

.text-header-huge { 
 
    display: inline-block; 
 
    font-family: 'Titillium Web', sans-serif; 
 
    font-weight: 900; 
 
    font-size: 120px; 
 
    line-height: 80%; 
 
    background-color: pink; 
 
} 
 

 
.text-header-huge span { 
 
    display: inline-block; 
 
    background-color: yellow; 
 
}

<div class="text-header-huge"> 
 
    <span> 
 
    XXX 
 
    </span> 
 
    <br> 
 
    <span> 
 
    XXX 
 
    </span> 
 
    <br> 
 
    <span> 
 
    XXX 
 
    </span> 
 
</div>

來源

2017-01-10 23:42:50

<span>線高度的造型變化與瀏覽器突出

回答

相關問題