如何在 CSS 中建立文字寬度背景而不影響整個元素？

在CSS 中建立文字寬度背景而不使用元素範圍顏色

實現文字寬度背景而不將其擴展到整個元素可以對CSS 提出了挑戰。解決方法如下：

隔離內聯元素中的文字

由於您無法修改HTML，因此您的解決方案是將文字限制在內聯元素中元素，例如。透過這樣做，您可以將背景顏色的範圍限制為文字本身。

將背景顏色應用於內聯元素

一旦文字在

中被隔離， span>，您可以毫不費力地將背景顏色應用於內聯元素。這可確保顏色保持限制在文字的邊界內。

範例實作

為了說明此技術，請考慮以下修訂版程式碼：

<h1 id="span-The-Last-Will-and-Testament-of-Eric-Jones-span"><span>The Last Will and Testament of Eric Jones</span></h1>

HTML：

h1 {
    text-align: center; 
}
h1 span { 
    background-color: green; 
}

HTML：CSS ：將文字包裝在中並將背景顏色應用於跨度，您成功創建了文字寬度背景，而無需修改主元素的寬度。

以上是如何在 CSS 中建立文字寬度背景而不影響整個元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！