Label doesn't work between lines if line-height greater 1 - css

Question

The label tag doesn't work between lines if line-height of the paragraph is greater than 1em.
<p style="line-height: 2em;"><input type="checkbox" id="xx" />
<label for="xx">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec feugiat quis magna sed varius. Suspendisse scelerisque cursus nunc et pulvinar. In nec metus dolor. Fusce blandit leo quis nulla scelerisque dignissim. Mauris fermentum diam sed metus venenatis pellentesque. Maecenas tellus lacus, condimentum in nibh et, ornare pharetra felis. Fusce mollis libero nisl, eu sodales mauris sagittis id.
</label></p>
See here: jsfiddle
Is there a way to prevent that?

Answer 1

I'm not sure how valid it is and in which versions of HTML, but you can wrap the whole paragraph with the label.
<label for="xx">
<p style="line-height: 2em;">
<input type="checkbox" id="xx" /> ...
</p>
</label>
Demo: http://jsfiddle.net/2nFdq/1/

Answer 2

If you don't need to use label for="" syntax you can do the following.
HTML:
<p style="line-height: 2em;">
<label>
<input type="checkbox" id="xx" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec feugiat quis magna sed varius. Suspendisse scelerisque cursus nunc et pulvinar. In nec metus dolor. Fusce blandit leo quis nulla scelerisque dignissim. Mauris fermentum diam sed metus venenatis pellentesque. Maecenas tellus lacus, condimentum in nibh et, ornare pharetra felis. Fusce mollis libero nisl, eu sodales mauris sagittis id. Maecenas semper nisi et augue imperdiet rutrum. Vivamus at viverra metus! Quisque eleifend cursus massa, sed facilisis diam ultrices ac. Nulla facilisi. Donec auctor adipiscing tellus id interdum. Nullam sodales libero sed lacus consectetur sollicitudin. Maecenas lacinia risus in lectus tincidunt, quis luctus turpis sollicitudin.
</label>
</p>
CSS:
label{
display:block;
}
See the fiddle.
Functionality is similar if you only add the CSS style but then you need to style the checkbox to align it nicely with the label text. (The label text occupies it's own block. In this solution it shares a block space with the checkbox.)
Update
Here's an alternative solution using CSS and label for="" syntax (Please use CSS. Inline styling is hard to maintain.):
<p><input type="checkbox" id="xx" />
<label for="xx">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec feugiat quis magna sed varius. Suspendisse scelerisque cursus nunc et pulvinar. In nec metus dolor. Fusce blandit leo quis nulla scelerisque dignissim. Mauris fermentum diam sed metus venenatis pellentesque. Maecenas tellus lacus, condimentum in nibh et, ornare pharetra felis. Fusce mollis libero nisl, eu sodales mauris sagittis id. Maecenas semper nisi et augue imperdiet rutrum. Vivamus at viverra metus! Quisque eleifend cursus massa, sed facilisis diam ultrices ac. Nulla facilisi. Donec auctor adipiscing tellus id interdum. Nullam sodales libero sed lacus consectetur sollicitudin. Maecenas lacinia risus in lectus tincidunt, quis luctus turpis sollicitudin.
</label>
</p>
CSS:
label{
line-height:2em;
display:block;
}
input[type="checkbox"]{
float:left;
position:relative;
margin:.5em .5em 0 0;
}
See the fiddle.