Comment puis-je régler span background-color donc les couleurs de l'arrière-plan tout au long de la ligne comme dans div (display: block; pas une option)

J'ai besoin pour le style de texte dans un élément. Pour cela, j'utilise une ligne de la durée de l'élément comme ceci:

<pre>
some text <span style="background-color:#ddd;">and some text
with a different background</span> and some more text
</pre>

Ensuite le code html est affiché, la durée des éléments d'arrière-plan est modifié uniquement sous le texte.

Est en quelque sorte possible de faire de la couleur d'arrière-plan s'étendre tout au long de la ligne sans changer l'affichage de block ou inline-block.

Ou est-il un moyen de réaliser cela avec javascript?

  • Non, pas vraiment (mais peut-être avec JS). Est display: block un problème pour une raison quelconque?
  • Votre question est un peu floue. La partie de l'exemple de texte doit avoir l'image de fond?
  • Cela ne semble pas être de programmation relative. Je vais demander à ce sur doctype.com à la place.
  • La raison display: block; est un problème, c'est qu'il y a peut être un texte et d'une durée de démarrage à la même ligne. La div d'introduire un saut de ligne qui n'est pas censé être là.
  • Salut @MichaelAndersen... je vois que vous êtes toujours un S. O. de l'utilisateur tout en UofC ;-)--~~ . . . . pourriez-vous s'il vous plaît accepter une réponse sur cette question, de sorte qu'un bon un ordre de priorité, vers le haut? (C'est idiot, que S. O. sortes ce incomplet ou inexact réponse vers le haut, puisque la question n'a pas de ✓Accepté de Répondre. À première vue, on pourrait être enclin à tenir compte de l'avis à la première réponse, au lieu de défilement pour trouver la plus précise ci-dessous.)
InformationsquelleAutor Michael Andersen | 2010-01-06
  1. 6

    vous pouvez atteindre cet objectif par la mise en forme de votre texte d'une manière différente. J'ai réalisé ce que je crois que vous êtes à la recherche pour les éléments suivants:

        <pre>
    some text<span style="background-color:#ddd;">
    and some text
    with a different background</span>
    and some more text
    </pre>
    • Pas dans safari ou firefox. Je suis désolé si je n'ai pas été assez clair. La couleur d'arrière-plan à continuer à la fin de la boîte contenant. Dans ce cas, le côté droit de la pré-élément.
    InformationsquelleAutor tmpvar
  2. 2

    L'élément span est en ligne, donc il change juste l'arrière-plan de l'endroit où vous avez placé. Car c'est aussi dans un <pre> tag, si vous souhaitez modifier l'arrière-plan de l'espace autour du texte trop, alors vous pouvez inclure que les espaces dans la durée.

    Par exemple, ce serait faire le changement d'arrière-plan de certains espaces à la fin de chaque ligne ainsi que derrière le texte (mais seulement en raison de la pre est l'espace est pris en compte, sans le préalable de l'espace sera ignoré comme normal.)

    <pre>
some text
<span style="background-color:#ddd;">and some text                   <br/>
with a different background           </span>
and some more text
</pre>

    Qu'est-ce que vous empêchant d'utiliser un élément de type block? Il serait beaucoup mieux à la durée d'affichage comme un élément de bloc plutôt que dans la ligne quand il est dans cette partie spécifique ou tout simplement utiliser un élément de type block pour commencer, plutôt que d'un empan. Par exemple,

    <html>
<head>
    <style>
    pre span { display: block; }
    </style>
</head>
<body>
    <pre>
    some text
    <span style="background-color:#ddd;">and some text<br/>
    with a different background</span>
    and some more text
    </pre>
</body>
</html>
    • La raison pour laquelle il ne peut pas être un élément de bloc, c'est qu'elle introduirait mais les sauts de ligne, puis une période commence et se termine à la même ligne que d'autres éléments ou d'autres textes. Désolé pour le malentendu. J'ai corrigé l'exemple de clarification.
    InformationsquelleAutor Rich Adams
  3. 2

    Vous pouvez essayer de travailler en mode inverse, il a plus de balises, mais il fait ce que vous voulez.

    <pre>
<div style="background-color:#ddd;float:left"><span style="background-color:#fff">some text</span>and some text
with a different background <span style="background-color:#fff">and some more text</span>
</div>
</pre>
    • Nice. Mais il introduit un problème de gris de texte de la première ligne est plus longue que le texte blanc dans la deuxième ligne. Ensuite, la deuxième ligne sera gris après le texte se termine. Mais pour un balisage statique, ce serait le travail.
    InformationsquelleAutor Mic
  4. 0

    span est un élément inline. Vous aurez besoin d'un bloc d'élément de niveau afin de remplir la totalité de la largeur.
    Inline rapport à bloc

    • Ce n'est pas vrai. Vous n'avez pas de couleur de l'ensemble de la ligne de fond. Voir d'autres réponses.
    InformationsquelleAutor easement