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


87

У меня такая разметка:

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

1
вы можете поместить свой код в jsfiddle?
Hardik

Я думаю, вам нужно быть более ясным в своих намерениях здесь. Если вы не хотите, чтобы текст переносился, вы можете просто использовать white-space: nowrap;in li span {...}, но у меня сложилось впечатление, что вы пытаетесь сделать что-то еще
My Head Hurts

@MyHeadHurts Извинения - мне это показалось ясным :) Я хочу две колонки в строке. Левая часть 20 пикселей предназначена для изображения. Остальное для текста. Если текст переносится, я хочу, чтобы он начинал вторую строку обтекания на 20 пикселей слева (под тем местом, где начинался исходный текст).
Ник

1
Прохожим, вам не нужно иметь дело с шириной, как предполагает принятый ответ. Это намного проще: создать так называемый новый контекст форматирования . См. Ответ Джо Конлина. Для получения дополнительной информации см. Мой.
hqcasanova

1
@hqcasanova Для справки, ответ Дэна был принят за 9 месяцев до того, как Джо опубликовал его, и за 16 месяцев до вашего. Я не собираюсь отказываться от ответа Дэна, хотя спасибо за добавление альтернатив.
Ник

Ответы:


35

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

Этот ответ был специфическим для вопроса 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}

Это действительно полезно. Я изменил свой spanна pэлемент. Тогда как раз эти два , казалось, сделать трюк: li p {margin-left: 40px} .fav_star {float: left}. Ширина изображения устанавливается самим изображением, pэлемент автоматически является a, blockи я оставил ширину в покое. Спасибо за это.
Ник

2
Если вы собираетесь использовать, display:blockвы можете использовать a, divпоскольку он для этого (или использовать, pкак вы также предлагаете). Нет необходимости в двойном переносе текста - если вы используете, pвы можете потерять span.
Gareth

IMO, вы не должны использовать HTML для изменения дизайна ваших страниц. Это работа для CSS (конечно, есть исключения, особенно когда вам нужна кроссбраузерная совместимость). Я считаю, что использование правильного HTML и «хорошая семантика» важнее. Поэтому я бы не стал использовать divв данном случае pбольше смысла. spanДля меня потеря в тривиальной ситуации зависит от того, как вы размещаете свой контент.
Дэн

Заворачивать <span>в <p>колдовство прямо из Хогварца! Красиво работает!
Янус

252

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

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


11
Это правильный ответ на этот вопрос. Этот метод не требует установки фиксированной ширины абзаца. Намного более простое и легкое решение. Прекрасно работает даже в IE8.
chocolata

4
Что ж, на самом деле это не сработает, если элемент, содержащий текст, был span(случай OP). display: blockПотребовалось бы для span. Но, сохраняя это, я согласен, что это гораздо более элегантное решение. Если кому-то интересно, в чем заключается магия overflow: hidden, см. Мой ответ ниже.
hqcasanova

7
Я не ожидал такого поведения, но это потрясающе.
Гэвин

2
Для протокола, этот ответ пришел через 8 месяцев после того, что я поставил :)
Ник

2
Вау. Работает отлично. Не могу поверить, что никогда раньше не знал этого.
SFlagg

25

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

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

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

1
Можете ли вы добавить в свой ответ некоторые детали из этой статьи, если ссылка не работает?

Доброе утро, Австралия! Спасибо за комментарий.
hqcasanova 01

Это отлично подходит для отображения блоков кода, которым, возможно, придется бороться с изображениями или плавающими боковыми панелями поблизости.
AlexMA 02

Первоначально описанная техника работает хорошо, хотя, как говорили другие, я не ожидал такого поведения. Однако я не вижу, чтобы float или inline-block работали без переполнения, и, конечно, связанные с таблицей отображаемые значения и абсолютное или фиксированное положение имеют другие последствия макета, которые могут быть или не могут быть приемлемыми в контексте.
enigment

3

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


Вероятно, это также необходимо vertical-align: top;на изображении.
ThinkingStiff

2

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


Кажется, это более современный эквивалент сеттинга overflow:auto. Я уверен, что это работает не во всех ситуациях, но и у меня это сработало.
Мэтт Браун

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%;
            }
        }
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.