Блог

Я пытаюсь заставить флажки появляться перед началом абзаца, но они появляются в нижней строке абзаца, если текст слишком длинный. Обратите внимание, что я хочу, чтобы текст переходил на новую строку, если он превышает ширину div.

Пример HTML:

 <label>
    <div class='note_div'>
        <input type='checkbox'>
        <p class='note'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt nunc condimentum suscipit hendrerit. Duis blandit purus lacus, at adipiscing sapien volutpat in. Curabitur tristique nisi quis sem malesuada ultricies. Curabitur venenatis gravida ligula, vel molestie odio blandit ut. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec fermentum vel nulla id porttitor. Pellentesque quis molestie leo. Nunc quis ligula ultricies, hendrerit enim nec, elementum ante. Praesent quam erat, facilisis id dolor a, gravida varius ligula. Praesent placerat, ipsum in euismod consectetur, eros libero</p>
    </div>
</label>
  

CSS:

 .note_div {
    width: 350px;
}

.note {
    width: 300px;
    word-wrap: break-word;
    display: inline-block;
    margin-top: 3px;
    margin-bottom: 3px;
}
  

Вот скрипка http://jsfiddle.net/3RfL8 /

Спасибо!

Вы можете использовать vertical-align :

 .note {
    vertical-align: top;
}
  

ДЕМОНСТРАЦИЯ

В качестве альтернативы, вы также могли бы использовать плавающие вместо встроенных блоков:

 .note_div > input {
    float: left;
}
.note {
    overflow: hidden;
}
  

ДЕМОНСТРАЦИЯ