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.
6 71
css css3 textwrapping css-float

6 ответов:

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

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

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

П. С. Вместо float:left на изображение можно также поставить float:right on 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}
30

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

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

226

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

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

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

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

3

задание display:flexдля текста работал на меня.

1

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