Предотвратить одно слово от обтекания float в css/html

Question

Есть ли способ предотвратить перенос одного или двух слов из одного плавающего числа, но разрешить его, если текст больше? Вот пример, где первый текст проблематичен, но второй текст в порядке.

http://jsfiddle.net/wdPCp/

<div class="wrapper"> 
<img src="http://lorempixel.com/100/100/animals" /> 
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <span class="last-bit">labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</span></div> 
</div> 

<div class="wrapper"> 
<img src="http://lorempixel.com/100/100/animals" /> 
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span class="last-text">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></div> 
</div> 

CSS:

img { 
    float:left; 
    margin:10px; 
    width:100px; 
    height:100px; 
} 

.wrapper { 
    width:300px; 
    margin-bottom:20px; 
} 

.text { 
} 

.last-text { 
} 

Update: Обратите внимание, что я не знаю заранее, где текст будет обернуть - Я ищу общее решение, если оно существует , Например, некоторый стиль для «.last-text», который заставляет его не обертывать под float.

CSS/HTML-решения предпочтительнее, чем JavaScript.

Answer 1

Предотвращения однословной упаковка легко: просто использовать не-брейк пространства между двумя последними словами, вместо нормального пространства (например, , nostrud exercitation).

Однако, боюсь, это не решит настоящую проблему. В случае с образцом было бы обернуть два слова, оставив последнюю, но одну строку короткими. И если текст станет больше, два слова будут склеиваться, даже если в этом нет необходимости.

Я боюсь, что этой проблеме понадобится какой-то нетривиальный код JavaScript, который после первоначального форматирования анализирует высоту текстового блока по сравнению с высотой изображения и изменяет стиль по некоторым критериям.

Answer 2

Просто добавьте padding-bottom: 1px; в img

Demo

img { 
    float:left; 
    margin:10px; 
    width:100px; 
    height:100px; 
    padding-bottom: 1px; 
} 

Вы также можете использовать правую и левую колонки, да я, конечно, использовал встроенный стиль, но если вы хотите пойти на этот подход, чем сделать класс для ясной и избавиться от внутреннего стиля

Demo 2

Answer 3

Решение состоит в том, чтобы немного увеличить ширину класса .wrapper.

вот .wrapper класса:

.wrapper { 
     width:330px; 
     margin-bottom:20px; 
    } 

http://jsfiddle.net/wdPCp/4/

Answer 4

Добавить overflow: hidden в .text, если вы не хотите, чтобы текст обертывался под поплавком.

http://jsfiddle.net/wdPCp/6/

Answer 5

К сожалению - не однозначный ответ, но я задал тот же вопрос некоторое время назад. Один из ответов, которые я получил там, был многообещающим (с использованием JS), но до сих пор я не смог его обработать. Мой вопрос также использует изображение, чтобы проиллюстрировать проблему, которая может быть полезна.

Я сталкивалась с этим вопросом всего времени в адаптивном дизайне с использованием CMS

Awkward line wrap around image

Answer 6

полистать различные стили отображения. Дисплей таблицы (а не теги) не перекрывает элементы с плавающей точкой.

.text{ 
    display:table; 
}