Управлять выделением текста на сайте / Выделение по границам текста

О чем речь? Не в курсе? Листай дальше=) Поймут только тру вебмастера=) Дело все в том, что иногда случается такая хрень:

То есть выделение вылазит за границы текста. Хотя правильно так:

И как так сделать? Все довольно просто. Для этого создадим 2 блока html с одинаковым содержимым:

<div class="content-false">
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. 
</div>
<div class="content-true">
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. 
</div>

Первому зададим следующие стили:

.content-false {
	margin-left:200px;
	height:200px;
	width:200px;
}

А второму вот эти:

.content-true {
	margin-left:200px;
	height:200px;
	width:200px;
	position:relative;
}

И сравним результат. В итоге - в первом блоке выделяется текст и еще пустое пространство справа и слева (так как родительским элементом для текста является body). А во втором блоке выделяется только сам текст, потому что свойством

position:relative;

мы указали, что элемент content-true является родителем для текста, который находится внутри.

Demo