Comment ajouter un remplissage au début et à la fin de chaque ligne de texte dans une étendue multiligne ?

Ajouter un remplissage au début et à la fin de chaque ligne de texte

Arrière-plan

Dans ce scénario, une étendue s'étend sur plusieurs lignes avec un arrière-plan couleur. L'utilisateur souhaite un remplissage de 10 px à la fin de chaque ligne, mais évite d'insérer manuellement des balises nbsp. Les solutions CSS ou JavaScript sont préférées.

Solution CSS

Dans IE8 et les versions ultérieures de Chrome, Firefox, Opera et Safari, le code CSS et HTML suivant fournit une solution créative :

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>

Explication

Cette technique crée plusieurs divs pour chaque ligne, avec un remplissage et une bordure pleine à gauche. Au sein de chaque div, un élément h3 en ligne positionne le texte. Le sous-titre flotte vers la gauche pour supprimer la bordure et ajouter de la hauteur de ligne.

Considérations

Cette solution est complexe et peut rencontrer des problèmes dans certains navigateurs. Bien qu'il fournisse une approximation visuelle du rembourrage souhaité, il peut ne pas être parfait dans tous les cas.

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!