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

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

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 {
}

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

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

Источник

6 ответов

Решение

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

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

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

Источник

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

демонстрация

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

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

Демо 2

Источник

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

Я постоянно сталкиваюсь с этой проблемой в адаптивных макетах с использованием CMS

Неловкая линия обтекания изображения

Источник

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

.text{
  display:table;
}
Источник

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

здесь .wrapper учебный класс:

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

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

Источник

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

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

Источник
Другие вопросы по тегам