CSS, чтобы остановить перенос текста под изображение

У меня есть следующая разметка:

<li id="CN2787">
  <img class="fav_star" src="images/fav.png">
  <span>Text, text and more text</span>
</li>

Я хочу, чтобы, если текст обертывается, он не входит в "столбец" для изображения. Я знаю, что могу сделать это с помощью table (что я делал), но это не работает для этой причины.

Я пробовал следующее без успеха:

li span {width: 100px; margin-left: 20px}
.fav_star {width: 20px}

Я также пробовал float: right.

Спасибо.

EDIT: Я хочу, чтобы это выглядело так:

IMG   Text starts here and keeps going... and
      wrap starts here.

Не так:

IMG   Text starts here and keeps going... and 
wrap starts in the space left for the image.

Ответ 1

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

Этот ответ был специфичен для вопроса ОП (который имел ширину, установленную в примерах). Хотя он работает, он требует, чтобы вы имели ширину для каждого из элементов, изображения и абзаца. Если это не ваше требование, я рекомендую использовать решение Joe Conlin, которое опубликовано как еще один ответ на этот вопрос.

Элемент span является встроенным элементом, вы не можете изменить его ширину в CSS.

Вы можете добавить следующий CSS в свой диапазон, чтобы вы могли изменить его ширину.

display: block;

Другим способом, который обычно имеет смысл, является использование элемента <p> в качестве родителя для вашего <span>.

<li id="CN2787">
  <img class="fav_star" src="images/fav.png">
  <p>
     <span>Text, text and more text</span>
  </p>
</li>

Так как <p> является элементом block, вы можете установить его ширину с помощью CSS, не изменяя ничего.

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

li p{width: 100px; margin-left: 20px}
.fav_star {width: 20px;float:left}

P.S. Вместо float:left на изображении вы также можете поместить float:right на li p, но в этом случае вам также понадобится text-align:left, чтобы правильно переписать текст.

P.S.S. Если вы решили использовать первое решение, не добавляющее элемент <p>, ваш CSS должен выглядеть так:

li span{width: 100px; margin-left: 20px;display:block}
.fav_star {width: 20px;float:left}

Ответ 2

Очень простой ответ на эту проблему, которая, кажется, ломает много людей:

<img src="url-to-image">
<p>Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

    img {
        float: left;
    }
    p {
        overflow: hidden;
    }

См. пример: http://jsfiddle.net/vandigroup/upKGe/132/

Ответ 3

Для тех, кто хочет получить некоторую справочную информацию, здесь короткая статья, объясняющая, почему работает overflow: hidden. Это связано с так называемым контекстом форматирования блока. Это часть спецификации W3C (т.е. Не является взломом) и в основном является областью, занятой элементом с блочным типом потока.

Каждый раз, когда он применяется, overflow: hidden создает новый контекст форматирования блока. Но это не единственное свойство, способное вызвать это поведение. Цитируя презентацию Фионы Чан из Сиднейской группы веб-приложений:

float: left/right

переполнение: скрытое/авто/прокрутка

display: table-cell и любые связанные с таблицей значения/встроенный блок

позиция: абсолютная/фиксированная

Ответ 4

Если вы хотите, чтобы margin-left работал с элементом span, вам нужно сделать его display: inline-block или display:block.

Ответ 5

Оберните div вокруг изображения и диапазона и добавьте следующее в CSS так:

HTML

        <li id="CN2787">
          <div><img class="fav_star" src="images/fav.png"></div>
          <div><span>Text, text and more text</span></div>
        </li>

CSS

            #CN2787 > div { 
                display: inline-block;
                vertical-align: top;
            }

            #CN2787 > div:first-of-type {
                width: 35%;
            }

            #CN2787 > div:last-of-type {
                width: 65%;
            }

МЕНЬШЕ

        #CN2787 {
            > div { 
                display: inline-block;
                vertical-align: top;
            }

            > div:first-of-type {
                width: 35%;
            }
            > div:last-of-type {
                width: 65%;
            }
        }

Ответ 6

настройка display:flex для текста, который работал у меня.