Label text is wrapped but not indent second line

Question

I have a form with limited width, however the label text maybe longer than form width, so the text was wrapped to multiple lines. My problem is that first line is indented b

Answer 1

You could do something like this:

HTML

<form class="form">
    <ul>
        <li>
          <input id="inputField">
          <label for="inputField">Field 1</label>
        </li>
        <li class="checkbox">
            <input type="checkbox" id="input2">
            <label for="input2">Field 2 Label, may be longer than normal, This is an example for this lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem</label>
        </li>
        <li class="checkbox">
            <input type="checkbox" id="input3">
            <label for="input3">Field 3 Normal long</label>
        <li>
    </ul>
</form>

CSS

.form {
  width: 300px;
}

.form ul {
  list-style:none;
  padding: 0;
}

.form ul li {
  overflow:hidden;
}

.form ul li.checkbox input {
  float:left;
}

.form ul li.checkbox label {
  float:right; 
  width:270px;
}

You can also use div's instead of an ul.

Answer 2

Something like this.

.checkbox-field {
    display: flex;
    flex-direction: row;
}

<div class="checkbox-field">
    <input type="checkbox" id="check">
    <label for="check">Field 2 Label, may be longer than normal, This is an example for this lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem</label>
</div>

Answer 3

text-indent just effected in first line,if you want indent all line, you should use padding and playing around with checkbox input: float:

     .form {
    width: 300px;
  }
#input2{
    float:left;

}
#input2 + label
{
  padding-left: 30px;
display: block;
}

here a jsfiddle

Answer 4

Edit your css like this:

.form {
  width: 300px;
}
label {
  display: block;
  margin-top: -20px;
  margin-left: 20px;
}