Comment ajouter un remplissage à la fin des lignes de texte en CSS et JavaScript ?

Ajouter un remplissage au début et à la fin des lignes de texte

Le besoin de remplissage sur des lignes de texte spécifiques peut survenir dans divers scénarios de conception. Dans ce cas, l'utilisateur souhaite un remplissage de 10 px à la fin de chaque ligne dans un élément span.

Approche CSS :

Le code CSS fourni offre une solution créative pour obtenir cet effet. Il utilise une combinaison de blocs en ligne, de style de bordure gauche et d'astuces de positionnement pour simuler le remplissage souhaité :

#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;
}

Cette solution, bien qu'impressionnante, n'est pas sans défis et n'est pas recommandée pour tous les navigateurs. . Cependant, cela démontre la flexibilité des techniques CSS.

Solution JS :

Pour une approche plus simple, vous pouvez utiliser JavaScript pour rechercher les sauts de ligne et ajouter des sauts de ligne insécables. espaces selon les besoins.

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!