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

My Expectation is

This is my example for the case:

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

Lysis

Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. – Dominga

Hi @JukkaK.Korpela, I also post the link to example – Lysis

I still see no code in the question. – Dominga

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

Answer 1

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>

Chesterfield

This is the best and simplest solution from my perspective, works well. Thanks a lot 🙏 – Maggs

Answer 2

Edit your css like this:

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

Hyrax

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

Blase

There is no property paddring-right, and padding-right puts padding on the right, not left. – Dominga

@Radian Have you tested this yourself? With such little information i would say put the paddding on the label. But it isn't so easy you see: jsbin.com/OSEcoXu/1 :) – Orcus

here a JSfiddle for you,u should add some float and width to your code: jsfiddle.net/G87Js/1 – Blase

@Radian I would say place this in your answer? as your official answer does not work :) The OP would not know he had to use floats – Orcus

Answer 4

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.

Moidore

Answer 5

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

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

Baiel

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Isochronize

This is not valid – Walters