Comment ajouter un remplissage horizontal à chaque ligne d'une phrase encapsulée sur plusieurs lignes?

Ceci est mon code:Comment ajouter un remplissage horizontal à chaque ligne d'une phrase encapsulée sur plusieurs lignes?

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

C'est ce qu'il ressemble actuellement:

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

Y at-il un moyen d'ajouter un rembourrage aux côtés du texte mis en évidence? Le remplissage régulier sur le SPAN ne fonctionne pas, car il ne prend en compte que le début et la fin de la phrase, et non chaque ligne séparément.

Des idées? Le code CSS3 est correct.

Source

2010-06-22 Marc

Juste pour clarifier, vous cherchez pour chaque ligne du texte enveloppé d'être rembourré différemment? Si non, pourquoi ne pas simplement appliquer le padding à l'étiquette div? – JohnFx

Eh bien, je suis presque 1 an plus tard, mais je suis à la recherche exactement la même chose .. – pasine

Découvrez cette solution - http://stackoverflow.com/a/34660112/483779 – Stickers

Après avoir lutté pendant un certain temps, j'ai trouvé une solution non excentrique avec une solution de repli décent pour les anciens navigateurs - en ajoutant deux CSS3 ombres portées aux 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; 
}

Source

2011-12-02 08:08:07

Merci. Exactement ce que je cherchais. – Marc

semble être le seul moyen. C'est parfait – Ben

C'est vraiment une solution géniale et simple à une tâche commune. – klickreflex

Il suffit de tamponner les étiquettes «p» qui entourent les travées. La balise "p" (contrairement à span) est un élément de niveau bloc, donc un remplissage en haut, en bas ou sur les côtés fonctionnera comme prévu.

Source

2010-06-22 20:41:39

Je veux remplir les bandes jaunes de textes, de sorte que le texte n'est pas si proche de côté. Exemple de maquette: http://i50.tinypic.com/206dlef.png Lors de l'ajout du rembourrage au P, il suffit d'ajouter le rembourrage au bloc entier. Cependant, je veux ajouter le remplissage aux lignes de texte individuellement.Je commence à penser que ce n'est pas possible, parce que la ligne de texte est déjà interprétée comme un élément, mais pour que mon idée fonctionne, elle doit interpréter chaque ligne de texte séparément pour que le remplissage horizontal fonctionne. – Marc

Malheureusement, je ne peux pas créer des éléments séparés pour chaque ligne, car ils sont créés dynamiquement et je ne connais pas le point de 'rupture' à l'avance. Idéalement, il y aurait un pseudo-sélecteur à chaque ligne, que je pourrais utiliser pour tamponner chaque ligne individuellement. – Marc

Essayez inline-block. Il ne fonctionnera pas dans quoi que ce soit de plus que IE8 (though there are some work arounds), mais tout le reste populaire devrait être bien:

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

Source

2010-06-23 23:20:59 robertc

Malheureusement, cela ne fonctionne pas non plus. Il crée juste un élément de bloc, qui ne nettoie pas ses frères et soeurs. Effectivement, cela signifie que je reçois un bloc de jaune, au lieu de lignes de jaune. – Marc

Oh je vois. Alors je pense que ce que vous voulez n'est pas possible - le rembourrage par sa nature s'applique aux blocs. Un certain type de solution jQuery pour ajouter des espaces insécables aux endroits appropriés est la seule solution. – robertc

Dommage. Je suppose que je vais le laisser tel quel. Merci pour l'aide en tout cas. – Marc

white-space: pre-wrap;

Pas vraiment une solution, mais n'ajoute un peu d'espace avant la pause.

Source

2010-11-03 22:07:25 Lutsen

Merci. En effet, cela ne résout pas le problème, mais l'espace supplémentaire m'aide vers le look que je veux. – Marc

-1

au lieu d'ajouter deux CSS3-ombres comme suggéré, voici une réponse beaucoup plus simple:

utilisation display:block

<span> est display:inline par défaut, les frontières et le rembourrage que vous avez ajouté ne sont pas réellement affecter sa taille. Donc, seule la première ligne est affectée.

Utilisez display:block sur l'étendue et <span> fonctionne maintenant comme <p> et <div>.

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

Source

2013-05-28 08:47:27

Ce n'est pas ce que l'OP veut ... si vous faites cela, il n'y a pas d'effet "highlight", cela ressemble à une simple boîte. – Arkana

a finalement trouvé un moyen de sortir de cette misère. A travaillé pour moi. Utilisez un bouton sur la gauche comme ça.

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

Source

2016-04-15 15:00:23

Comment ajouter un remplissage horizontal à chaque ligne d'une phrase encapsulée sur plusieurs lignes?

Répondre

Questions connexes