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

Question

I am hoping to indent the second line of the label so that it never goes behind the starting point of first line.

Here is my HTML:-

        <label for="ui-multiselect-edit-1" title="" class="ui-corner-all ui-state-hover">
    <input id="ui-multiselect-edit-1" name="multiselect_edit-selective" type="checkbox"   value="Cost-of something" title="">

    <span>Cost-driven / restructuring transformations</span>
</label>

This is how it looks

Can I tweak it so that transformations don't go behind the Cost?

Thanks

Answer 1

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;
}

Answer 2

And one more approach:

label[for] {
    white-space: nowrap;
}

label[for] input{
    vertical-align: top;
}

label[for] span
{
    display: inline-block;
    white-space: normal;
}