Je veux créer un style de texte similaire à une étiquette. Regardant ici:
Je peux presque le faire en utilisant simplement : http://jsfiddle.net/stape/ Toutes les idées d'un moyen simple d'atteindre cet effet?
8 Réponses :
Je pense que vous pouvez réaliser ce que vous voulez en modifiant Affichage: Inline à Affichage: Inline-Block . Ceci a quelques problèmes de compatibilité de navigation (selon votre ensemble cible):
Cela ne fonctionne pas. Cela rend l'ensemble de la balise p se transformer en un bloc jaune.
Enveloppez chaque ligne avec une portée. Définissez la portée pour être le niveau de bloc. Appliquez l'arrière-plan et le rembourrage à la portée.
pourrait utiliser
Je n'ai jamais réellement utilisé
Je pense que
J'ai pu y parvenir en modifiant un peu votre structure Dom:
Cela fonctionne bien. Se sent un peu désordonnée, mais quelque chose dans ce style ne serait généralement généralement que pour une petite quantité de texte, alors je suppose que ce n'est pas une si grosse affaire.
En fait, j'avais horrible
de toute façon, donc ce n'est pas beaucoup de différence. Merci.
Quel est le point de Span Wraps si dans 95% des cas possibles, le texte doit être dynamique et la longueur peut être modifiée à tout moment? .. Cette solution n'est utile que pour les statiques.
Ajouter une allumette à votre paragraphe comme ceci:
p.p1{display: inline; background: yellow;}
span {padding: 5px; background: yellow; display: inline-block;}
Je perdrais les balises Br à gauche avec bloc d'affichage. Moins de marquage.
Ce genre de chose que vous recherchez?
était un peu long enroulé! Hense le 44 dans l'URL. Si vous pouvez vivre sans P Tags, il faut que ce soit ok pour vous
Pas aussi sémantique qu'utilisement p et étiquettes , mais cela fonctionne. +1
C'est une tâche difficile à faire ...
Mais :) J'ai trouvé un excellent article pour cela!
Avec les solutions suivantes, vous pouvez effectuer votre texte Dinamic en surbrillance sans utiliser d'enveloppe pour chaque ligne.
Vous aurez besoin de bricoler avec
hauteur de ligne: xxpx - Travailler sur un échantillon.On ne sait pas quel effet réel vous voulez accomplir. S'il vous plaît donner un peu plus d'informations sur la façon dont vous voulez avoir l'air, et pas ce que vous pensez être le bon moyen de le trier. (C.-à-d. Rembourrage)
@antershrubery: une image vaut mille mots?
Comme le dit Dutchie dit que la hauteur de ligne + le rembourrage donnera l'effet d'espacer le texte et de garder le fond jaune. Si c'est ce que vous voulez, alors avoir un violon et voyez ce qui fonctionne le mieux pour vous. Je posterais cela comme une réponse mais Dutchie devrait prendre un crédit.
@Stephen: Il n'est pas clair de la photo de ce qu'il essayait de faire avec le rembourrage lorsque la photo n'inclut pas le rembourrage, c'est pourquoi j'ai demandé des éclaircissements.
@antershrubery La photo a un petit rembourrage à l'extérieur, surtout visible par rapport à la liaison Jfiddle i Publié, où le texte est exactement en ligne avec le fond jaune. Vous avez raison, j'aurais dû rendre le rembourrage légèrement plus gros dans l'image.
Je vois le rembourrage dans la photo.
C'est certainement 5px, peut-être 1 ou 2, ce qui est probablement ce qui m'a été confus.