Maison > interface Web > tutoriel CSS > Comment puis-je ajouter un remplissage aux bords d'un texte multiligne en utilisant CSS et HTML ?

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

Linda Hamilton
Libérer: 2024-11-08 07:28:02
original
730 Les gens l'ont consulté

How can I add padding to the edges of multi-line text using CSS and 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;
}
Copier après la connexion

HTML :

<div>
Copier après la connexion

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.
  7. 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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal