Can you apply CSS only on text that is wrapped, i.e. the second and subsequent lines?

Question

I want to put a margin-left on only the text that is wrapped, i.e. text after the first line:

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

Example

click to see

The input and the label are in 1 div and text is wrapped on the second line, which is what I want
but is it possible to have like a margin left on only the text that is wrapped on the second line

jsfiddle example of my problem

Carn

Answer 1

Yeah, sort of — I’d suggest combining padding-left and text-indent:

.test {
    width:200px;
}

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

<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>

text-indent applies only to the first line of text in a block-level element, so it should achieve what you want.

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

Threesome

@Kevin: excellent, cheers. I’d suggest putting you <input>s inside your <label>s (this provides an unbroken click target as well), and use the <label>s to apply the outdent CSS. See jsfiddle.net/pauldwaite/qUvvv – Threesome

headache savor ! thanks – Daniels

Answer 2

No, but you can apply CSS to the first line, so you could reverse your thinking to achieve the same effect.

Something like this:

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

Here's a JSFiddle example of it working: http://jsfiddle.net/4ckxJ/3/

See http://www.quirksmode.org/css/firstline.html for more info on the :first-line pseudo-class.

Rhythmandblues

That doesn’t actually appear to work though — I think because each line doesn’t have its own individual box (in the CSS box model sense), it’s more like one continuous broken box. – Threesome

eh, I had the wrong jsfiddle link! Updated to give you a really working version. – Rhythmandblues

aha, there we go. Looks like you don’t actually need the :first-line bit in there though — if you remove it, it still works. – Threesome

To provide proof for my comment (just three short years later): jsfiddle.net/4ckxJ/36 – Threesome

Answer 3

You could wrap the line you want to wrap in a span and apply:

display: block;
margin-left: 12px;

Giving it display: block will make it wrap to a new line and the margin pushes it off to the right.

Carn

The text is dynamic so I don't know where the line will wrap – Carn

Answer 4

as per your updated example, here's a fork JSFiddle

float the input and then make the label display block so it floats right in beside it - spacing created with padding and margin, overflow:hidden makes the text "not wrap" - then you also might want to remove the br's from your HTML

Iceland