CSS: le texte mis en évidence d'effet

Je suis en train de produire un texte mis en évidence d'effet avec un peu de rembourrage, mais le remplissage est appliqué uniquement au début et à la fin, pas de nouvelles lignes de.

#highlight {
background: rgba(255,230,0,0.5);
padding: 3px 5px;
margin: -3px -5px;
line-height: 1.7;
border-radius: 3px;
}

<span id=highlight>text<br>here</span>

Veuillez voir ici: http://jsfiddle.net/CNJZK/7/

Sont là toute pure CSS fixe pour obtenir l'interne ("sharp") bords de prolonger un peu plus loin?
c'est à dire comme dans cette image: http://i.imgur.com/j8mIJZS.jpg

C'est l'idée de mettre du texte en surbrillance à l'intérieur d'un grand bloc de texte? Votre exemple ne montre pas cela, mais je crois que c'est ce que vous obtenez.
Oui. Peut-être que cela clarifie: jsfiddle.net/CNJZK/7 les arrêts de la mise en évidence brusquement au début/à la fin de chaque ligne, lorsque visuellement, c'est ce que j'aimerais faire: i.imgur.com/j8mIJZS.jpg
double possible de Comment ajouter rembourrage horizontal à chaque ligne dans un multi-ligne enveloppé phrase?

OriginalL'auteur Caspid | 2013-09-11

  1. 5

    Essayez de régler l'affichage de votre durée de inline-block:

    #highlight {
    background: rgba(255, 230, 0, 0.5);
    padding: 3px 5px;
    margin: -3px -5px;
    line-height: 1.7;
    border-radius: 3px;
    display:inline-block;
}

    jsFiddle exemple

    Inline-block crée un bloc rectangulaire de mettre en évidence. Je suis à la recherche de quelque chose qui se réduit pour le texte (en ligne), mais s'étend juste un peu plus loin. C'est peut-être plus clair avec plus de texte: jsfiddle.net/CNJZK/5

    OriginalL'auteur j08691

  2. 3

    Si vous n'êtes pas limité à un standard HTML, vous pouvez prendre un coup d'oeil à la <mark> balise, qui a été introduit avec HTML5. Ce site vous donne un rapide négliger.

    Espère que cela aide!

    OriginalL'auteur Beejay

  3. 0

    Vous avez besoin pour régler l'affichage inline-block ou block.

    #highlight {
    display: inline-block;
    /* ... */
}
    Un bloc crée un rectangle de mettre en évidence autour de l'ensemble du texte (y compris les choses avant/après la durée). Je voudrais quelque chose qui s'adapte le texte, avec un peu de rembourrage au début/à la fin de lignes: i.imgur.com/j8mIJZS.jpg
    Hmmm...je ne peux pas trouver un moyen. Désolé.

    OriginalL'auteur crush

  4. 0

    Au cas où quelqu'un est toujours à la recherche d'une réponse:

    p {
    box-shadow: 0px 0px 0px 5px yellow;
    display: inline;
    line-height: 2;
    margin: -5px -5px;
    background-color: yellow;
    border-radius: 1px;
}

    Voir jsfiddle ici.

    OriginalL'auteur Nathan Upchurch

  5. 0

    Solution est ce CSS:

    -webkit-box-decoration-break: clone;
box-decoration-break: clone;
display: inline;

    https://css-tricks.com/almanac/properties/b/box-decoration-break/

    OriginalL'auteur Ima