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.

Оскільки це питання набирає багато переглядів, і це була прийнята відповідь, я відчув потребу додати таку відмову від відповідальності:

Ця відповідь була специфічною для запитання 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створює новий контекст форматування блоків. Але це не єдина властивість, здатна викликати таку поведінку. Процитувавши презентацію Фіони Чан із Сіднейської групи веб-програм:

• поплавок: лівий / правий
• переповнення: прихований / авто / прокрутка
• display: cell-cell та будь-які пов'язані з таблицею значення / inline-block
• положення: абсолютне / фіксоване

Якщо ви хочете, 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%;
            }
        }