Bagaimana untuk Mencipta Latar Belakang Lebar Teks dalam CSS tanpa Menjejaskan Keseluruhan Elemen?

Mencipta Latar Belakang Lebar Teks dalam CSS tanpa Warna Lebar Elemen

Mencapai latar belakang lebar teks tanpa memanjangkannya ke seluruh elemen boleh memberikan cabaran dalam CSS. Begini cara untuk menyelesaikannya:

Asingkan Teks dalam Elemen Sebaris

Memandangkan anda disekat daripada mengubah suai HTML, penyelesaian anda terletak pada mengehadkan teks dalam baris sebaris elemen, seperti . Dengan berbuat demikian, anda mengehadkan skop warna latar belakang kepada teks itu sendiri.

Gunakan Warna Latar Belakang pada Elemen Sebaris

Setelah teks diasingkan dalam , anda boleh menggunakan warna latar belakang dengan mudah pada elemen sebaris. Ini memastikan bahawa warna kekal terhad kepada sempadan teks.

Contoh Pelaksanaan

Untuk menggambarkan teknik ini, pertimbangkan penyemakan berikut kod:

HTML:

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

CSS:

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

Dengan membalut teks dalam dan menggunakan warna latar belakang pada rentang, anda berjaya mencipta latar belakang lebar teks tanpa mengubah suai lebar elemen utama.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Latar Belakang Lebar Teks dalam CSS tanpa Menjejaskan Keseluruhan Elemen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!