Kevin
Ich möchte ein setzen margin-left auf nur den Text, der umbrochen wird, dh Text nach der ersten Zeile:
This is text with no margin left
this text has margin left
Beispiel
Die Eingabe und das Label sind in 1 div und Text wird in der zweiten Zeile umbrochen, was ich will
aber ist es möglich, dass nur der Text, der in der zweiten Zeile umbrochen wird, wie ein Rand übrig bleibt
Paul D. Waite
Ja, irgendwie – ich würde vorschlagen, zu kombinieren padding-left und text-indent:
<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>
.test {
width:200px;
}
.test label {
display: block;
padding-left: 1em;
text-indent: -1em;
}
text-indent gilt nur für die erste Textzeile in einem Element auf Blockebene, also sollte es das erreichen, was Sie wollen.
@Kevin: ausgezeichnet, Prost. Ich würde vorschlagen, Sie zu setzen <input>ist in deinem <label>s (dies bietet auch ein ununterbrochenes Klickziel) und verwenden Sie die <label>s, um das ausgerückte CSS anzuwenden. Sehen jsfiddle.net/pauldwaite/qUvvv
– Paul D. Waite
31. März 2011 um 10:22 Uhr
Kopfschmerzen schmecken! Danke
– AlainIb
25. November 2021 um 11:15 Uhr
Spudley
Nein, aber Sie kann Wenden Sie CSS auf die erste Zeile an, damit Sie Ihr Denken umkehren könnten, um den gleichen Effekt zu erzielen.
Etwas wie das:
.mytext {margin-left:-5em;}
.mytext:first-line {margin-left:0;}
Hier ist ein JSFiddle-Beispiel dafür, wie es funktioniert: http://jsfiddle.net/4ckxJ/3/
Sehen http://www.quirksmode.org/css/firstline.html für weitere Informationen über die :first-line Pseudo-Klasse.
Das scheint jedoch nicht wirklich zu funktionieren – ich denke, da jede Zeile keine eigene Box hat (im Sinne des CSS-Box-Modells), ist es eher wie eine durchgehende kaputte Box.
– Paul D. Waite
31. März 2011 um 9:37 Uhr
eh, ich hatte den falschen jsfiddle-link! Aktualisiert, um Ihnen eine zu geben Ja wirklich Arbeitsversion.
– Spudley
31. März 2011 um 9:42 Uhr
aha, da gehen wir. Sieht so aus, als würdest du das nicht wirklich brauchen :first-line etwas drin – wenn Sie es entfernen, funktioniert es immer noch.
– Paul D. Waite
31. März 2011 um 10:00 Uhr
Um meinen Kommentar zu beweisen (nur drei kurze Jahre später): jsfiddle.net/4ckxJ/36
– Paul D. Waite
4. März 2014 um 12:58 Uhr
Sie könnten die Zeile, die Sie umbrechen möchten, in a umbrechen span und bewerben:
display: block;
margin-left: 12px;
Geben Sie es display: block wird es in eine neue Zeile umbrechen und der Rand schiebt es nach rechts ab.
Der Text ist dynamisch, daher weiß ich nicht, wo die Zeile umbrochen wird
– Kevin
31. März 2011 um 10:16 Uhr
Gemäß Ihrem aktualisierten Beispiel ist hier a Gabel JSFiddle
schweben Sie die Eingabe und machen Sie dann den Beschriftungsanzeigeblock so, dass er direkt daneben schwebt – Abstand, der mit Polsterung und Rand erstellt wird, overflow:hidden macht den Text “nicht umbrechen” – dann möchten Sie vielleicht auch den entfernen br‘s aus Ihrem HTML
