Ajouter un remplissage aux bords du texte multiligne à l'aide de CSS et HTML
Afin d'obtenir cet effet sans utiliser d'espace insécable balises, nous pouvons utiliser une combinaison de CSS et de HTML. Voici comment :
CSS :
#titleContainer { width: 520px; } h3 { margin:0; font-size: 42px; font-weight: bold; font-family: sans-serif; } h3 .heading { background-color: #000; color: #00a3d0; } h3 .subhead { background-color: #00a3d0; color: #000; } div { line-height: 1.1; padding: 1px 0; border-left: 30px solid #000; display: inline-block; } h3 { background-color: #000; color: #fff; display: inline; margin: 0; padding: 0; } h3 .indent { position: relative; left: -15px; } h3 .subhead { padding: 0 15px; float: left; margin: 3px 0 0 -29px; outline: 1px solid #00a3d0; line-height: 1.15; }
HTML :
<div>
Penjelasan :
Cette solution CSS et HTML offre un moyen flexible et compatible avec tous les navigateurs d'ajouter un remplissage au début et à la fin de chaque ligne de texte, comme démontré dans la capture d'écran de Chrome fournie précédemment.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!