Zapobiega zawijaniu tekstu pod pole wyboru

Jedną z opcji byłoby coś takiego.

form#updateProfile fieldset label{
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
    float: left;
    width: 30%;
    padding-left: 3%;
    position: relative;
}

input {
    position: absolute;
    left: -5px;
}

Demo tutaj: http://jsbin.com/opoqon/1/edit

Sposób, w jaki to robię jest inny, co nie jest owijaniem inputs z labels, raczej robie coś w rodzaju

<input id="ski-trips" type="checkbox" name="vacation" value="Ski Trips"><label for="ski-trips">Ski Trips</label>

, co pozwala na łatwiejszą stylizację.

Oto przykład tego sposobu: http://jsbin.com/otezut/1/edit

Podoba mi się to ...

HTML:

<input type="checkbox" name="vacation" value="Ski Trips"><label>very long label ...</label>

CSS:

input[type="checkbox"] { 
    position: absolute;
}
input[type="checkbox"] ~ label { 
    padding-left:1.4em;
    display:inline-block;
}

Jest to inna opcja. To bardzo proste, ale skuteczne. Bierzesz rolę, która się pakuje. <label><input type="checkbox" name="vacation" value="Historical and educational trips"> Historical and educational <span class="antiWrap">trips</span></label> i dodajesz span z klasą. Zadzwoniłem do antykwariatu. Następnie używasz css, aby dodać do niego lewy margines. .antiWrap { margin-left: 18px; } Oto myfiddle oparte na Twoim kodzie. http://jsfiddle.net/alexhram/7WmGr/3 myślę, że o to ci chodzi? Daj mi znać.

Oto jeden, który jest mniej zależny od wielkości elementów wejściowych.

div {width: 12em;}

label {
  display: block;
  white-space: nowrap;
  margin: 10px;
}

label input {
  vertical-align: middle;
}

label span {
  display: inline-block;
  white-space: normal;
  vertical-align: top;
  position: relative;
  top: 2px;
}

<div>

<label><input type="radio"><span>I won't wrap</span></label>
<label><input type="checkbox"><span>I won't wrap</span></label>

<label><input type="radio"><span>I am a long label which will wrap</span></label>
<label><input type="checkbox"><span>I am a long label, I will wrap beside the input</span></label>

</div>