Comment ajouter un remplissage horizontal à chaque ligne dans une phrase enveloppée multiligne?

C'est mon code:

<div><p><span>... highlighted text ...</span></p><p>Chapter info</p></div>

C'est à quoi il ressemble actuellement:

http://i48.tinypic.com/2dqvo1i.png

Est-il un moyen d'ajouter un rembourrage sur les côtés du texte en surbrillance? Régulière de rembourrage sur la DURÉE ne fonctionne pas, car il ne prend en compte que le début et la fin de la phrase, et pas à chaque ligne séparément.

Des idées? Le code CSS3 est fine.

source d'informationauteur Marc | 2010-06-22

  1. 24

    Après avoir lutté pendant un certain temps, j'ai trouvé un non-décalé solution avec une bonne solution de repli pour les navigateurs plus anciens – l'ajout de deux CSS3-les ombres des lignes de texte:

    span {
background:#ff0;color:#000;
box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
-moz-box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
-webkit-box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
}
  2. 4
    white-space: pre-wrap;

    Pas vraiment une solution, mais ne ajouter de l'espace avant la pause.

  3. 1

    Juste pad le "p" balises qui entourent les travées. Le "p" de la balise (à la différence de durée) est un bloc élément de niveau, de sorte que le rembourrage sur le haut, le bas ou sur les côtés.

  4. 0

    Essayer inline-block. Il ne fonctionnera pas dans quelque chose de plus que IE8 (bien qu'il existe quelques solutions), mais tout le reste populaire devrait être bon:

    p span {
    display: inline-block;
    padding: 0 2em;
}
  5. 0

    Enfin trouvé un moyen de sortir de cette misère. A travaillé pour moi. Utiliser un bouton sur la gauche de ce genre.

    <p>
<button class="blankspace">
</button>
<span>
</span>
</p>

    et css comme 

    .blankspace {
    background: none;
    opacity: 0.0;
    outline:0;
    text-decoration: none;
    width: 2%;
    height: 80%;
    margin:0 auto;
    float:left;
    text-align:right;
    padding:0%;
    font-size:2px;
}
  6. -1

    Au lieu d'ajouter deux CSS3-les ombres, comme l'a suggéré, ici, c'est beaucoup plus simple de répondre:

    utilisation display:block

    <span> est display:inline par défaut, de sorte que les frontières et le rembourrage vous ajoutés ne sont pas vraiment touchant, c'est la taille. Donc, seule la première ligne est affectée.

    Utilisation display:block sur la plage et <span> fonctionne désormais comme <p> et <div>.

    Voici une bonne explication:
    http://quirksmode.org/css/css2/display.html