Question

I have an input[type='radio'] element inside a block container of fixed width. The supporting text for the <input/> element does not fit in a single line, and falls over to two or more lines. For example:

div.leftBlock {   position: relative;   float: left;   width: 275px; }

<div class='leftBlock'>   <input type='radio' name='foo' value='bar' id='option' /> This is a rather long supporting text that does not fit in one line. </div>

How would I be able to style the <input/> element (or its text) such that every other line the text falls to starts at the same indent level the first line does? The first line of text has to be at the same vertical level as the <input/> element.

Any help will be much appreciated.

Answer 1

The container could use positive left padding, and a negative text-indent.

.leftBlock {     padding-left: 20px;     text-indent: -20px; } .leftBlock input {     width: 20px; } 

Here’s an example