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.

Спасибо.

РЕДАКТИРОВАТЬ: Я хочу, чтобы это выглядело так:

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.

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

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

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}

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

PSS Если вы выбрали первое решение - не добавлять <p>элемент, ваш CSS должен выглядеть так:

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

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

<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/

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

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

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

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

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

Оберните 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%;
            }
        }