Label Text Is Wrapped But Not Indent Second Line

Indenting the Second line of Label to be exactly below the first line through CSS

One option would be to float the input element to the left and then change the display of the span element to table. (example)

label > input {
    float:left;
}
label > span {
    display:table;
}

It's worth noting that IE7 doesn't support display:table.

Alternatively, change the display of the span element to block and add a margin-left value equal to the width of the checkbox element + padding.. (example)

label > span {
    margin-left:28px;
    display:block;
}

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

Yeah, sort of — I’d suggest combining padding-left and 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 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/

Indent first line of a paragraph, but only if it takes multiple lines

Here is hacky idea that requires an extra wrapper:

p {
 max-width: 350px;
 line-height:1.2em; /* height of one line */
}
.e {
  display:flex; /* a flex container to be able to use 100% in the height*/
}
/* a pseudo element to create the indentation*/
.e p:before {
  content:"";
  float:left;
  width:20px; 
  /* 0px if 100% (height of p) is less or equal to 1.2em (one line)
     1px if 100% is bigger than one line
  */
  height:clamp(0px,100% - 1.2em,1px)
}

<div class="e"><p>This is a pretty long paragraph which spans over a few lines. For that reason I wish its first line to be indented (as it should be).</p></div>

<div class="e"><p>These are short paragraphs.</p></div>

<div class="e"><p>I don't want them indented.</p></div>

<div class="e"><p>Unless they take multiple lines.</p></div>

Indenting multiline labels

label {
    display: block;
    margin-left: 20px;
}
input {
    float: left;
    margin-left: -20px;
    margin-right: 7px;
}

Here's the fiddle: http://jsfiddle.net/hrfmt/ . Play with the values.

EDIT:

If all the browsers you need to support can understand display: inline-block, use that instead of float.

Line break goes outside of paragraph is it starts with an image

An (modern) option is to use a flexbox.

.container {

  display: flex;

  width: 300px; /* Just for demo purpose */

}

.container p {

  margin: 0;

}

<div class="container">

  <img src="https://www.fineartpixel.com/wp-content/uploads/edd/2018/01/THUMB_CartoonKidsHolding123Numbers.jpg" width="150" />

  <p>Acquisto sicuro, pagamento in contanti alla consegna</p>

</div>

Aligning multiple lines of text with label, with same indentation

You can use display: table; and display: table-cell;

.item {

 display: table;

}

.label {

  display: table-cell;

}

.text {

  display: table-cell;

}

<div class="item">

  <div class="label">Label:</div>

  <div class="text">Multi-lined text, should wrap with the first line aligned with the label, and the wrapped text indented all the same. The first line should remain inline with the label untill it wraps. Both the label and the text are unknown lengths. I can't seem to accomplish this with either floats or inline-block.</div>

</div>