CSS - Ajouter le remplissage de la deuxième ligne de texte en ligne

Je ne suis même pas sûr si c'est possible, mais j'ai pensé que c'était la peine de demander.

Il serait inutile de tenter de l'expliquer, je suis déchets à des choses comme ça, alors vérifiez cette démo - http://www.deanelliott.me/braintrain/

Voir comment les titres sur les 6 images ont un fond orange couleur? Et maintenant voir comment le rembourrage est manquant à partir de la droite de la première, et la partie gauche de la deuxième ligne?

Est-il possible d'ajouter le remplissage de sorte que l'arrière-plan n'est pas simplement s'arrêter à la fin/début de la parole?

Ou devrais-je leur dis que c'est unfeasable et ils ont à vivre avec elle?

InformationsquelleAutor Dean Elliott | 2013-02-22
  1. 5

    Le problème ici c'est que vous ne pouvez pas le pad à la fin du mot/commencer là où le contenu de l'enveloppe, de sorte ce ne sera pas possible à moins de modifier le type d'affichage pour les liens vers un bloc-type de style, par exemple, "bloquer" ou "inline-block", mais, naturellement, qui affecte l'apparence quelque peu.

    Vous pouvez obtenir un peu plus loin en ajoutant:

    white-space: pre-wrap;

    à la .blog-grid .grid-block h2 a, #sidebar h2 a règle; cependant elle n'est pas une solution complète (mais c'est tout ce que je peux venir avec).

    • Je pense que c'est probablement la meilleure solution. Ils ont juste à vivre avec elle. Merci beaucoup
    • Pas de problème!
    InformationsquelleAutor Raad
  2. 2
    .blog-grid .grid-block h2 a, #sidebar h2 a {
    /* other css properties */
    display: inline-block; /* or display: block */
}
    • Que déplacer le texte dans l'image...
    • utilisation display: inline-block..
    InformationsquelleAutor Mr_Green
  3. 1

    Ajout de texte-tiret dans le CSS peut aussi travailler

    text-indent: 10px;
    InformationsquelleAutor Swastik
  4. 0

    ajouter un peu de code pour la classe "post-title tilt" - il answeirs pour vos titres.
    écrire peut-être padding-left:20px; ou si elle ne fonctionne pas: margin-left:20px;

    InformationsquelleAutor Anton Kizema
  5. -1

    pouvez-vous modifier le code? l'ajout de durée pour chaque ligne devrait fonctionner
    span class="line1" et span class="ligne2"

    <a href="#">
  <span class="line1">a safe alternative to</span>
  <span class="line2">ritalin</span>
</a>
    InformationsquelleAutor Daniel Ursu