Label text is wrapped but not indent second line

user_1064473 0
Viewed 19937

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 because of input element but second line is not, it makes the form not nice.

Do you have any idea to make the second, third ... will be indented as first line, only use CSS?

Actual:

enter image description here

My Expectation is

enter image description here

This is my example for the case:

http://jsbin.com/UvaqISO/2/edit

text-indent css html
5 Answers

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>

user_142194280

Edit your css like this:

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

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

user_18975770

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.

user_30125870

This is what I have found the easier and more elegant solution:

ul { margin-left: 1em; }
li { text-indent: 1em hanging; }
user_37265830
Related