Comment puis-je ajouter un remplissage aux bords d'un texte multiligne en utilisant CSS et HTML ?

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 :

1. Nous enveloppons le texte dans un <div> avec un identifiant "titleContainer" pour contenir l'intégralité du texte.
2. Nous enveloppons le texte dans un

   balisez et définissez des styles pour l'ensemble de l'ensemble

   ainsi que pour le éléments avec les classes "titre" et "sous-titre".

3. Pour créer la séparation de ligne, nous créons un autre <div> dans le

   et stylisez-le avec la hauteur de ligne, le remplissage, la bordure gauche et l'affichage. Cela sépare les lignes tout en conservant leur alignement.

4. Nous enveloppons le texte dans un avec la classe "indent" et utilisez position: relative et left: -15px pour décaler le texte vers la gauche, créant ainsi le remplissage souhaité au début de la ligne.
5. Le sous-texte avec la classe "subhead" est flottant à gauche et positionné à l'aide de marges pour garantir un alignement correct.
6. Internet Explorer (IE) nécessite un style supplémentaire pour corriger la marge du texte du sous-titre, qui est inclus dans les commentaires conditionnels.

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!