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:

enter image description here

My Expectation is

enter image description here

This is my example for the case:

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

Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. — Jukka K. Korpela, Dec 04 '13 at 07:58
Possible duplicate of [Can you apply CSS only on text that is wrapped, i.e. the second and subsequent lines?](http://stackoverflow.com/questions/5497112/can-you-apply-css-only-on-text-that-is-wrapped-i-e-the-second-and-subsequent-l) — matt., Apr 24 '16 at 18:47

score 11 · Answer 1 · answered Sep 04 '20 at 07:13

11

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>

answered Sep 04 '20 at 07:13

Дима Телси

111
1
3

1

This is the best and simplest solution from my perspective, works well. Thanks a lot – AlphaX Dec 22 '20 at 10:04

score 9 · Answer 2 · edited Nov 10 '20 at 00:00

9

Edit your css like this:

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

edited Nov 10 '20 at 00:00

Rodney Hickman

3,133
11
53
83

answered Dec 04 '13 at 09:07

Marinus

441
5
11

Hamed mayahian · Answer 3 · 2013-12-04T09:04:42.350

1

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

edited Dec 04 '13 at 09:04

answered Dec 04 '13 at 07:51

Hamed mayahian

2,465
6
27
49

There is no property `paddring-right`, and `padding-right` puts padding on the right, not left. – Jukka K. Korpela Dec 04 '13 at 08:00
@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: http://jsbin.com/OSEcoXu/1 :) – nkmol Dec 04 '13 at 08:55
here a JSfiddle for you,u should add some float and width to your code: http://jsfiddle.net/G87Js/1/ – Hamed mayahian Dec 04 '13 at 08:59
@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 – nkmol Dec 04 '13 at 09:02

score 1 · Answer 4 · answered Dec 04 '13 at 08:46

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.

score 0 · Answer 5 · answered Jul 21 '22 at 13:51

0

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

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

answered Jul 21 '22 at 13:51

Carlos Borges

1

1

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](/help/how-to-answer). – Community Jul 23 '22 at 07:00

Label text is wrapped but not indent second line

5 Answers5

Linked

Related