Разное

Css обтекание текста: Как сделать обтекание картинки текстом?

20.07.2023

Как сделать обтекание картинки текстом?

Тема:Форматирование изображений

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+1.0+4.0+1.0+1.0+1.0+1.0+

Задача

Добавить изображение на страницу так, чтобы оно обтекалось рядом лежащим текстом.

Решение

Обтекание картинки текстом обычно используется для компактного размещения материала и связывания между собой иллюстраций и текста. Само обтекание создаётся с помощью стилевого свойства float, добавляемого к селектору IMG. Значение left выравнивает изображение по левому краю, right — по правому. Обтекание при этом происходит по другим, свободным сторонам.

Пример 1. Обтекание картинок

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Обтекание</title>
  <style>
   . leftimg {
    float:left; /* Выравнивание по левому краю */
    margin: 7px 7px 7px 0; /* Отступы вокруг картинки */
   }
   .rightimg  {
    float: right; /* Выравнивание по правому краю  */ 
    margin: 7px 0 7px 7px; /* Отступы вокруг картинки */
   }
  </style>
 </head>
 <body>
  <h3>Доклад лейтенанта Бокатуева</h3>
  <p><img src="images/1.jpg" alt="Лейтенант Бокатуев">
     Вчера во время проведения разведоперации наша группа подверглась нападению неизвестного 
     противника в камуфляжной форме Алиенов. В результате эффективной обороны и стремительной 
     контратаки многочисленная группа боевиков была смята и отброшена. Среди личного состава 
     потерь нет. Бойцы разведгруппы проявили недюжие навыки владения оружием. Особо отличился 
     в бою взводный Кудряшев&nbsp;М.А., грамотно использовавший человеческие ресурсы 
     своего взвода. В результате операции были захвачены элементы внеземной культуры, которые 
     переданы аналитической группе.
 
 
 </p>
     <h3>Пресс-релиз аналитической группы</h3>
  <p><img src="images/2.jpg" alt="Учёные, находящиеся в состоянии аффекта">
     В наших секретных лабораториях в рамках проекта &laquo;Пандора&raquo; разрабатывалось
     психотропное оружие. В результате неудачного эксперимента большинство ученых, работавших 
     над прибором, подверглись воздействию психотропного излучения, и они, находясь в состоянии 
     аффекта, растащили прототип по деталям. Возможно, наши ученые до сих пор находятся в 
     состоянии аффекта.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Текст с иллюстрациями

Использование свойства float заставляет текст плотно прилегать к изображению. Поэтому в примере введёно универсальное свойство margin, которое добавляет отступы между картинкой и текстом. Это свойство одновременно задаёт отступ сверху, справа, снизу и слева от фотографий.

изображенияплавающие элементы

HTML по теме

  • Тег <img>

CSS по теме

  • float
  • margin

Обтекание блока и картинки текстом.

Отмена обтекания
  • Плавающие элементы
  • Отмена обтекания

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

Плавающие элементы

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

  • left — смещает элемент влево
  • right — смещает элемент вправо
  • none — отменяет плавание элемента

Единственным требованием для любого плавающего элемента является наличие фиксированной ширины (width).

Когда вы определяете плавающий элемент, вам нужно расположить его в коде прямо под тем элементом, под которым он должен «плавать», всё остальное содержимое расположенное в коде под плавающим элементом будет обтекать его на веб-странице.

Рассмотрим более подробно то, как браузеры загружают плавающие элементы и остальное содержимое на веб-страницу.

Cначала браузер загружает элементы на страницу в обычном порядке, двигаясь сверху вниз, когда он встречает плавающий элемент, то размещает его с указанной стороны. Браузер исключает этот элемент из общего потока, и в результате он «плавает» на странице.

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

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

Имейте ввиду, что в одном ряду можно размещать несколько плавающих элементов, если это позволяет ширина родительского элемента.

Примечание: элементы с абсолютным и фиксированным позиционированием игнорируют свойство float.


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
	  p { width: 250px; }
      img { float: left; }
    </style>
  </head>
  <body>
    <p>
    <img src="css.png">
    С помощью CSS свойства float картинка была сделана плавающей с левой стороны. 
    Текст, расположенный в HTML коде ниже картинки, будет обтекать картинку
    по правой и нижней стороне.</p>
  </body>
</html>
Попробовать »

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

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


img { 
  float: left;
  margin: 0 10px 10px 0;
}
Попробовать »

Отмена обтекания

Иногда требуется отобразить элемент таким образом, чтобы на него не влияли плавающие элементы, расположенные перед ним. Таким элементом к примеру может быть нижний колонтитул, который в любом случае должен отображаться под всеми остальными элементами страницы. Если у вас на странице высокое боковое меню, расположенное с левого края веб-страницы, то нижний колонтитул может подняться вверх и отображаться справа от него. Таким образом, вместо того, чтобы располагаться страницы, содержимое нижнего колонтитула появится на одном уровне с боковым меню. Данная проблема решается, с помощью свойства clear, которое сообщает браузеру о том, что стилизуемый элемент не должен обтекать плавающий.

Для CSS свойства clear можно установить одно из значений:

  • left — плавающие элементы запрещены с левой стороны.
  • right — плавающие элементы запрещены с правой стороны.
  • both — плавающие элементы запрещены с обеих сторон.
  • none — разрешает наличие плавающих элементов с обеих сторон.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
	  div { width: 400px; }
      img { float: right; }
      p { clear: right; }
    </style>
  </head>
  <body>
    <div>
    <img src="logocss.gif">
    <p>С помощью свойства clear установлено, что плавающие элементы запрещены
    с правой стороны. Текст, расположенный ниже картинки, не будет обтекать картинку
	по левому краю.</p>
    </div>
  </body>
</html>
Попробовать »

Обтекание и разрыв текста — CSS: каскадные таблицы стилей

В этом руководстве объясняются различные способы управления переполнением текста в CSS.

В CSS, если у вас есть неразрывная строка, такая как очень длинное слово, по умолчанию она переполнит любой контейнер, который слишком мал для нее, во встроенном направлении. Мы можем видеть, как это происходит в приведенном ниже примере: длинное слово выходит за границу поля, в котором оно содержится.

CSS отобразит переполнение таким образом, потому что выполнение чего-либо еще может привести к потере данных. В CSS потеря данных означает, что часть вашего контента исчезает. Таким образом, начальное значение

overflow это visible , и мы можем видеть переполняющий текст. Как правило, лучше иметь возможность видеть переполнение, даже если оно грязное. Если что-то исчезнет или будет обрезано, как если бы переполнение было установлено на скрытое , вы могли бы не заметить этого при предварительном просмотре своего сайта. Беспорядочное переполнение, по крайней мере, легко заметить, а в худшем случае ваш посетитель сможет увидеть и прочитать контент, даже если он выглядит немного странно.

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

Чтобы найти минимальный размер блока, который будет содержать его содержимое без переполнения, установите для свойства блока width или inline-size значение min-content .

Таким образом, использование min-content является одной из возможностей переполнения ящиков. Если можно позволить окну увеличиться до минимального размера, необходимого для содержимого, но не больше, использование этого ключевого слова даст вам этот размер.

Если блок должен иметь фиксированный размер или вы хотите, чтобы длинные слова не могли переполниться, то вам может помочь свойство overflow-wrap . Это свойство разбивает слово, если оно слишком длинное и не помещается в строке само по себе.

Примечание: Свойство overflow-wrap действует так же, как нестандартное свойство word-wrap . Свойство word-wrap теперь рассматривается браузерами как псевдоним стандартного свойства.

Альтернативное свойство, которое можно попробовать, это word-break . Это свойство разбивает слово в точке его переполнения. Это приведет к безубыточности, если размещение слова на новой строке позволит отобразить его без разрыва.

В следующем примере вы можете сравнить разницу между двумя свойствами одной и той же текстовой строки.

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

В приведенном ниже примере есть флажок и метка. Допустим, вы хотите, чтобы этикетка порвалась, если она окажется слишком длинной для коробки. Однако вы не хотите, чтобы он ломался сразу после флажка.

Чтобы добавить дефисы, когда слова разбиты, используйте свойство CSS hyphens . Используя значение auto , браузер может автоматически разбивать слова в соответствующих точках переноса, следуя любым правилам, которые он выбирает. Чтобы иметь некоторый контроль над процессом, используйте значение manual , затем вставьте в строку символ жесткого или мягкого разрыва. Жесткий разрыв ( ‐ ) всегда прерывается, даже если в этом нет необходимости. Мягкий разрыв ( ­ ) прерывается только в том случае, если разрыв необходим.

Вы также можете использовать свойство hyphenate-character , чтобы использовать строку по вашему выбору вместо символа дефиса в конце строки (перед переносом строки).

Это свойство также принимает значение auto , который выберет правильное значение для обозначения разрыва строки в середине слова в соответствии с типографскими соглашениями текущего языка содержимого.

Если вы знаете, где должна прерываться длинная строка, то также можно вставить элемент HTML . Это может быть полезно в таких случаях, как отображение длинного URL-адреса на странице. Затем вы можете добавить это свойство, чтобы разорвать строку в разумных местах, что облегчит чтение.

В приведенном ниже примере текст прерывается на месте .

  • Элемент HTML
  • Свойство CSS word break
  • Свойство CSS overflow-wrap
  • Свойство CSS white-space
  • Свойство CSS дефисов
  • Переполнение и потеря данных в CSS

Обнаружили проблему с содержанием этой страницы?

  • Отредактируйте страницу на GitHub.
  • Сообщить о проблеме с содержимым.
  • Посмотреть исходный код на GitHub.
Хотите принять больше участия?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена участниками MDN.

Свойство переноса слов в CSS

❮ Назад Полное руководство по CSS Далее ❯


Пример

Разрешить перенос длинных слов на следующую строку:

div {
  word-wrap: break-word;
}

Попробуйте сами »

Определение и использование

Свойство word-wrap позволяет разбивать и переносить длинные слова. на следующую строку.

Показать демо ❯

Значение по умолчанию: нормальный
По наследству: да
Анимация: нет. Читать о анимированном
Версия: CSS3
Синтаксис JavaScript: объект .style.wordWrap=»break-word» Попробуй

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Собственность
перенос слов 4,0 5,5 3,5 3.1 10,5

Синтаксис CSS

word-wrap: normal|break-word|initial|inherit;

Значения свойств

Значение Описание Демо
обычный Разрывать слова только в разрешенных точках останова. Это по умолчанию Демонстрация ❯
ключевое слово Позволяет ломать неразрывные слова Демонстрация ❯
начальный Устанавливает для этого свойства значение по умолчанию. Читать о начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

Связанные страницы

Учебник CSS: Текстовые эффекты CSS

❮ Предыдущая Полное руководство по CSS Далее ❯

ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery
9000 3

Лучшие ссылки
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *