Pouvez-vous appliquer le style CSS uniquement sur le texte qui est enveloppé, c'est à dire la deuxième ligne et les lignes suivantes?

Je veux mettre un margin-left sur le texte qui est enveloppé, c'est à dire le texte après la première ligne:

This is text with no margin left
     this text has margin left

Exemple

cliquez pour voir

L'entrée et le label sont en 1 div et le texte est renvoyé à la deuxième ligne, qui est ce que je veux

mais est-il possible d'avoir une marge à gauche sur le texte qui est enroulé sur la deuxième ligne

jsfiddle exemple de mon problème

InformationsquelleAutor Kevin | 2011-03-31
  1. 39

    Ouais, en quelque sorte — je vous suggère de combiner padding-left et text-indent:

    HTML

    <div class="test">
    <label for="2question1">
        <input type="checkbox" id="2question1" name="2question" title="Merknaam 1" /> Very long text which is wrapped on the next line
    </label><br>

    <label for="2question2">
        <input type="checkbox" id="2question2" name="2question" title="Merknaam 2" /> Merknaam 2
    </label><br>

    <label for="2question3">
        <input type="checkbox" id="2question3" name="2question" title="Merknaam 3" /> Merknaam 3
    </label><br>

    <label for="2question4">
        <input type="checkbox" id="2question4" name="2question" title="Merknaam 4" /> Merknaam 4
    </label><br>
</div>

     CSS

    .test {
    width:200px;
}

.test label {
    display: block;
    padding-left: 1em;
    text-indent: -1em;
}

    text-indent s'applique seulement à la première ligne de texte dans un bloc au niveau de l'élément, de sorte qu'il devrait obtenir ce que vous voulez.

    Voir http://jsfiddle.net/pauldwaite/qUvvv/

    • J'ai recréé mon problème sur jsfiddle: jsfiddle.net/Kevin1990/UQ3A5
    • excellent, merci. Je vous suggère de vous mettre <input>s à l'intérieur de votre <label>s (ceci fournit un flux cliquez sur la cible en tant que bien), et l'utilisation de la <label>s pour appliquer le hausser CSS. Voir jsfiddle.net/pauldwaite/qUvvv
    • hourra!
    InformationsquelleAutor Paul D. Waite
  2. 2

    Non, mais vous peut appliquer le style CSS à la première ligne, de sorte que vous pouvez inverser votre pensée afin d'atteindre le même effet.

    Quelque chose comme ceci:

    .mytext {margin-left:-5em;}
.mytext:first-line {margin-left:0;}

    Voici un JSFiddle exemple de ce travail: http://jsfiddle.net/4ckxJ/3/

    Voir http://www.quirksmode.org/css/firstline.html pour plus d'info sur le :first-line pseudo-classe.

    • Qui n'a pas fait apparaître de travail — je pense que parce que chaque ligne ne dispose pas de son propre boîte individuelle (dans le modèle de boîte CSS sens), c'est plus comme continue cassé la boîte.
    • eh, j'ai eu la mauvaise jsfiddle lien! Mise à jour pour vous donner un vraiment version de travail.
    • ah, nous y voilà. On dirait que vous n'avez pas réellement besoin de la :first-line peu là — si vous l'enlever, il fonctionne toujours.
    • Fournir la preuve de mon commentaire (à peine trois ans plus tard): jsfiddle.net/4ckxJ/36
    InformationsquelleAutor Spudley
  3. 0

    Vous pourriez enrouler la ligne que vous souhaitez envelopper dans un span et s'appliquent:

    display: block;
margin-left: 12px;

    Lui donnant display: block permettra de faire envelopper d'une nouvelle ligne et de la marge, il pousse à l'extrême droite.

    • Le texte est dynamique donc je ne sais pas où la ligne se terminera
    InformationsquelleAutor Kevin
  4. 0

    que par mise à jour de votre exemple, voici un fourche JSFiddle

    flotteur de l'entrée et ensuite prendre l'étiquette display block pour qu'elle flotte à droite en regard de l'espacement de créé avec rembourrage et de la marge, overflow:hidden rend le texte "pas de wrap" - alors vous aussi vous pouvez supprimer le br's à partir de votre code HTML

    InformationsquelleAutor clairesuzy