When the label for=""
syntax is not needed, you can implement the following method.
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;
}
View the fiddle.
If you prefer to use the label for=""
syntax along with CSS to align the checkbox neatly with the label text, here's an alternative solution:
<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;
}
View the fiddle.