Содержание

overflow-x | CSS | WebReference

  • Содержание
    • Краткая информация
    • Синтаксис
    • Значения
    • Песочница
    • Пример
    • Спецификация
    • Браузеры

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

Значение по умолчаниюvisible
НаследуетсяНет
ПрименяетсяК блочным элементам
АнимируетсяНет

Синтаксис 

overflow-x: auto | hidden | scroll | visible

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).
normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

visible
Отображается всё содержимое элемента, даже за пределами установленной ширины.
hidden
Отображается только область внутри элемента, остальное будет скрыто.
scroll
Всегда добавляется горизонтальная полоса прокрутки.
auto
Горизонтальная полоса прокрутки добавляется только при необходимости.

Песочница

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

auto hidden scroll visible

div {
  white-space: pre;
  overflow-x: {{ playgroundValue }};
}

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>overflow-x</title> <style> .layer { overflow-x: scroll; /* Добавляем полосу прокрутки */ width: 300px; /* Ширина блока */ height: 150px; /* Высота блока */ padding: 5px; /* Поля вокруг текста */ border: solid 1px black; /* Параметры рамки */ white-space: nowrap; /* Запрещаем перенос строк */ } </style> </head> <body> <div> <h3>Гетерогенный голубой гель</h3> <p>Кондуктометрия мягко передает электронный способ получения независимо от последствий проникновения метилкарбиола внутрь.
</p> </div> </body> </html>

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

Рис. 1. Применение свойства overflow-x

Объектная модель

Объект.style.overflowX

Спецификация

Спецификация		Статус
CSS Overflow Module Level 3Рабочий проект

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

51219.533.5
11103

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

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

Форматирование

См. также

  • overflow
  • overflow-y

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 02.03.2020

Редакторы: Влад Мержевич

Overflow scroll не работает

Skip to content

Содержание:

  • 1 Значения свойства overflow
    • 1.1 visible
    • 1.2 hidden
    • 1.3 scroll
    • 1.4 overflow-x и overflow-y
    • 1.5 Разбивка длинного текста
    • 1.6 Поддержка браузерами
    • 1.7 3 ответа
  • 2 visible
  • 3 hidden
  • 4 scroll
  • 5 overflow-x, overflow-y
  • 6 Итого

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

Это касается полос прокрутки по умолчанию. Можно контролировать поведение содержимого элемента, когда он выходит за пределы блока, с помощью CSS-свойства overflow hidden .

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

visible: значение по умолчанию. Оно задает отображение содержимого вне блока элемента и позволяет не « заталкивать » содержимое внутрь блока элемента.

hidden: содержимое, выходящее за пределы блока элемента, будет скрыто.

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

auto: добавляет полосы прокрутки, если необходимо.

initial: устанавливает значение по умолчанию.

inherit: устанавливает значение, которое задано для родительского элемента.

Теперь осмотрим, как каждое из этих значений влияет на контент.

visible

overflow: visible — содержимое может выходить за границы элемента, если его размеры превышают размеры контейнера. Выходящее за пределы элемента содержимое не влияет на стандартный макет.

Ширина и высота элемента div установлена на 200px и 100px . Если размеры содержимого больше размеров блока, то оно выходит за его пределы.

hidden

CSS overflow: hidden скрывает содержимое, выходящее за пределы контейнера.

scroll

Добавляет полосы прокрутки, даже если содержимое не выходит за пределы контейнера. Обратите внимание, что overflow: scroll добавляет горизонтальную и вертикальную полосы прокрутки.

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

Это значение похоже на значение scroll , но полосы прокрутки добавляются только при необходимости. В приведенной ниже демо-версии overflow: auto добавляет вертикальную полосу прокрутки к первому блоку, содержимое которого превышает его высоту блока. А во втором случае полосы прокрутки не добавляются.

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

overflow-x и overflow-y

Свойства overflow-x hidden и overflow-y задают, как содержимое, выходящее за рамки контейнера, отображается в горизонтальном и вертикальном направлении. Для них можно задать все шесть значений, описанных выше.

Давайте рассмотрим примеры.

Если ширина внешнего блока составляет 200 пикселей , а внутреннего — 250 пикселей , то задав для внешнего блока overflow-x: auto , мы добавим в него горизонтальную полосу прокрутки, так как ширина содержимого превышает ширину блока.

Если высота внешнего блока 100 пикселей , а высота внутреннего блока — 150 пикселей , то overflow-y: auto добавляет вертикальную полосу прокрутки.

Разбивка длинного текста

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

Если мы укажем word-wrap: break-word , выходящее за пределы контейнера слово разбивается на два, чтобы оно могло вписаться в пределы контейнера body overflow hidden .

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

Свойство overflow отлично работает во всех браузерах. IE 4-6 расширяет контейнер, чтобы он соответствовал ширине содержимого.

Данная публикация представляет собой перевод статьи « CSS overflow Property » , подготовленной дружной командой проекта Интернет-технологии.ру

1 Sieryuu [2012-11-07 10:37:00]

Это мой код

Как я могу отображать все окна горизонтально?

И у Bigbox есть scroll bar с фиксированной width .

Я попытался изменить ширину на 5000 пикселей, и она работает, но ширина над полями

html css scroll

3 ответа

4 Решение Rohit Azad [2012-11-07 10:55:00]

Демо- версия — Jsfiddle Demo

Теперь HI добавить некоторые свойства

как это

Сделайте свой . box div display:inline-block;

-1 iMoses [2012-11-07 10:44:00]

Самый лучший и простой способ (насколько я знаю) — обернуть все элементы .box и определить их родительскую ширину как сумму всей ширины своих детей.

В вашем примере кода это будет:

Если число полей не префикса, то я предлагаю вам использовать JavaScript для динамической установки ширины .boxview .

Также обратите внимание, что overflow-x не будет работать в старых браузерах (только IE9+).

Возможно, вы захотите добавить overflow: auto прежде чем определять overflow-x и overflow-y как резерв.

Свойство overflow управляет тем, как ведёт себя содержимое блочного элемента, если его размер превышает допустимую длину/ширину.

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

Но что, если высота/ширина указаны явно? Тогда блок не может увеличиться, и содержимое «переполняет» блок. Его отображение в этом случае задаётся свойством overflow .

visible

Если не ставить overflow явно или поставить visible , то содержимое отображается за границами блока.

Как правило, такое переполнение указывает на ошибку в вёрстке. Если содержимое может быть больше контейнера – используют другие значения.

hidden

Переполняющее содержимое не отображается.

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

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

При переполнении отображается полоса прокрутки.

scroll

Полоса прокрутки отображается всегда.

То же самое, что auto , но полоса прокрутки видна всегда, даже если переполнения нет.

overflow-x, overflow-y

Можно указать поведение блока при переполнении по ширине в overflow-x и высоте – в overflow-y :

Итого

Свойства overflow-x/overflow-y (или оба одновременно: overflow ) задают поведение контейнера при переполнении:

visible По умолчанию, содержимое вылезает за границы блока.

hidden Переполняющее содержимое невидимо. auto Полоса прокрутки при переполнении. scroll Полоса прокрутки всегда.

Кроме того, значение overflow: auto | hidden изменяет поведение контейнера, содержащего float . Так как элемент с float находится вне потока, то обычно контейнер не выделяет под него место. Но если стоит такой overflow , то место выделяется, т.е. контейнер растягивается. Более подробно этот вопрос рассмотрен в статье Свойство float.

Рубрики

  • Без рубрики
  • Дримкаст аксессуары
  • Дримкаст игры
  • Дримкаст прохождения
  • Дримкаст эмуляторы
  • История
  • Компьютеры
  • Помощь
  • Приставки

Adblock
detector

что это такое и как работает

Что такое переполнение в CSS?

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

CSS Overflow Visible

CSS Overflow Hidden

Прокрутка переполнения CSS

Автоматическое переполнение CSS

CSS Overflow-x

CSS Overflow-y

CSS Overflow Wrap

Переполнение текста CSS

Зажим переполнения CSS

Эллипсис переполнения CSS

Контроль переполнения в ваших макетах

Независимо от того, создаете ли вы макеты с нуля или настраиваете заранее разработанные, вы, вероятно, столкнетесь с некоторыми проблемами выравнивания.

Скажем, например, у вас есть изображение героя в верхней части вашей домашней страницы. Ниже у вас есть несколько элементов div, содержащих текст. Возможно, это похоже на демонстрацию домашней страницы SEO WP ниже.

Источник изображения

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

Что такое переполнение в CSS?

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

Прежде чем мы более подробно рассмотрим свойство переполнения, давайте проясним, что мы имели в виду под «блоком элемента». Согласно модели блока CSS, прямоугольное поле создается для элементов HTML. Этот блок состоит из четырех слоев: самого содержимого, заполнения, границы и поля, как показано ниже.

Источник изображения

Когда содержимое HTML-элемента выходит за пределы любого из краев блока – будь то край содержимого, край заполнения, край границы или край поля – это называется переполнением.

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

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

CSS Overflow Visible

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

По умолчанию свойство переполнения CSS установлено как visible. Это означает, что вам не нужно устанавливать для свойства переполнения CSS значение «visible», если вы не переопределяете CSS во внешней таблице стилей или где-то еще на своем сайте.

Давайте посмотрим на пример.

Вот CSS:

#example1 {
  background-color: #EEEEEE;
  box-sizing: border-box;
  width: 300px;
  height: 170px;
  padding: 30px;
  border: 1px solid #000000;
  margin: 10px;
  overflow: visible;
}
#example2 {
  background-color: #EEEEEE;
  box-sizing: border-box;
  width: 300px;
  padding: 30px;
  border: 1px solid #000000;
  margin: 10px;
}

Вот HTML:

<h3>CSS Overflow Visible</h3>
<p>Overflow:visible means that the overflow will render outside the element's box and potentially overlap with other elements on the page, as shown below. Since the CSS overflow property is set to visible by default, you don't have to define it in your CSS. I did just for the sake of this demo.</p>
<div>This is dummy text. This is more dummy text.  This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
</div>
<div>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
</div>

Вот результат:

Источник изображения

CSS Overflow Hidden

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

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

Давайте посмотрим на пример:

Вот CSS:

#example1 {
  background-color: #EEEEEE;
  box-sizing: border-box;
  width: 300px;
  height: 170px;
  padding: 30px;
  border: 1px solid #000000;
  margin: 10px;
  overflow: hidden;
}
#example2 {
  background-color: #EEEEEE;
  box-sizing: border-box;
  width: 300px;
  padding: 30px;
  border: 1px solid #000000;
  margin: 10px;
}

Вот HTML:

<h3>CSS Overflow Hidden</h3>
<p>Overflow:hidden means that the overflow will not render outside the element’s box. Instead, it will be clipped at the box's padding edge. This value differs from "clip" in that it still allows programmatic scrolling, which means the box is technically a scroll container.</p>
<div>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.  This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
</div>
<div>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
</div>

Вот результат:

Источник изображения

Прокрутка переполнения CSS

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

Вот пример.

Вот CSS:

#example1 {
  background-color: #EEEEEE;
  box-sizing: border-box;
  width: 300px;
  height: 170px;
  padding: 30px;
  border: 1px solid #000000;
  margin: 10px;
  overflow: scroll;
}
#example2 {
  background-color: #EEEEEE;
  box-sizing: border-box;
  width: 300px;
  padding: 30px;
  border: 1px solid #000000;
  margin: 10px;
}

Вот HTML:

<h3>CSS Overflow Scroll</h3>
<p>Overflow:scroll means that the overflow will be clipped at the box's padding edge, but a scrolling mechanism will be added so that users will be able to scroll to see the content that isn't visible.  In the example below, a scrollbar is added. </p>
<div>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
</div>
<div>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
</div>

Вот результат:

Источник изображения

Автоматическое переполнение CSS

Значение «авто» похоже на прокрутку, но добавляет полосу прокрутки только при переполнении поля.

В приведенном ниже примере оба div определены с помощью overflow: auto. Однако только у одного есть прокручиваемое переполнение и полоса прокрутки. Другой нет.

Вот CSS:

#example1 {
  background-color: #EEEEEE;
  box-sizing: border-box;
  width: 300px;
  height: 170px;
  padding: 30px;
  border: 1px solid #000000;
  margin: 10px;
  overflow: auto;
}
#example2 {
  background-color: #EEEEEE;
  box-sizing: border-box;
  width: 300px;
  padding: 30px;
  border: 1px solid #000000;
  margin: 10px;
  overflow: auto;
}

Вот HTML:

<h3>CSS Overflow Auto</h3>
<p>Overflow:auto means that the overflow will be clipped at the box's padding edge and a scroll bar will be added if necessary.  Meaning, the box has scrollable overflow. In the example below, the first div has overflow and therefore a scrollbar and the second div does not. </p>
<div>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
</div>
<div>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
</div>

Вот результат:

Источник изображения

В приведенных выше примерах мы использовали сокращенное свойство переполнения. Это сокращение для свойств overflow-x и overflow-y. Давайте подробнее рассмотрим эти два свойства, написанные ниже.

CSS Overflow-x

Свойство overflow-x используется для управления горизонтальным переполнением или переполнением слева и справа от поля элемента.

Давайте посмотрим на пример ниже.

Вот CSS:

#example1 {
  width: 400px;
  height: 200px;
  overflow-x: scroll;
  overflow-y: hidden;
}
#example2 {
  background-color: #EEEEEE;
  box-sizing: border-box;
  width: 400px;
  padding: 30px;
  border: 1px solid #000000;
}

Вот HTML:

<h3>CSS Overflow-x and Overflow-y Properties</h3>
<p>Instead of using the shorthand overflow property, I can use the overflow-x and overflow-y properties to control the overflow horizontally and vertically. In this example, I set overflow-x to scroll so I can scroll from left to right to view the image. But I set the overflow-y to hidden so I can't scroll up and down.</p>
<div>
  <img src="https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg">
</div>
<div>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.  This is more dummy text.
</div>

Вот результат:

Источник изображения

CSS Overflow-y

Свойство overflow-y используется для управления вертикальным переполнением или переполнением сверху и снизу поля элемента.

Давайте обратим значения из приведенного выше примера.

Вот CSS:

#example1 {
  width: 400px;
  height: 200px;
  overflow-x: hidden;
  overflow-y: scroll;
}
#example2 {
  background-color: #EEEEEE;
  box-sizing: border-box;
  width: 400px;
  padding: 30px;
  border: 1px solid #000000;
}

Вот HTML:

<h3>CSS Overflow-x and Overflow-y Properties</h3>
<p>Instead of using the shorthand overflow property, I can use the overflow-x and overflow-y properties to control the overflow horizontally and vertically. In this example, I set overflow-x to hidden so I can't scroll up and down. But I set the overflow-y to scroll so I can scroll up and down to view the image.</p>
<div>
  <img src="https://scx1. b-cdn.net/csz/news/800/2017/theoreticala.jpg">
</div>
<div>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
</div>

Вот результат:

Источник изображения

Вы можете использовать сокращенное свойство overflow вместо определения свойств overflow-x и overflow-y. Если указаны два значения, первое представляет значение overflow-x, а второе – overflow-y. Если есть только одно значение, оно применяется как к свойствам overflow-x, так и overflow-y. Например, если я определил div, содержащий изображение, с помощью overflow: scroll; тогда изображение можно было прокручивать по горизонтали и вертикали.

CSS Overflow Wrap

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

Чтобы использовать свойство overflow-wrap, свойство white-space должно разрешать перенос. Это означает, что для свойства white-space может быть установлено значение «normal», «pre-wrap», «break-space» или «pre-line». Чаще всего вы увидите, что он установлен на «нормально».

Есть три возможных значения для определения свойства overflow-wrap. Их краткое определение приводится ниже.

  • Нормальный: строки обрываются только в точках невынужденного разрыва, например, между двумя словами.
  • Где угодно: линии могут разорваться в точках принудительного останова, если нет невынужденных. Например, длинное слово или URL-адрес может быть разбит на другую строку. В точке останова дефис не вставляется. С этим значением возможности минимизировать количество содержимого, выходящего за пределы строки, путем переноса строки в точку останова учитываются при вычислении внутренних размеров минимального содержимого или наименьшего размера, который может занять блок, не вызывая переполнения.
  • Слово прерывания: строки могут разрываться в точках принудительного прерывания, если нет невынужденных. В точке останова дефис не вставляется. Однако с этим значением возможности минимизировать объем содержимого, переполняющего строку, путем переноса строки в точку останова не учитываются при вычислении внутренних размеров минимального содержимого или наименьшего размера, который может принимать блок, не вызывая переполнения.

Давайте посмотрим на пример, показывающий каждое из этих значений ниже.

Вот CSS:

.wrap {
   width: 200px;
   margin: 5px;
   background: #AACC88;
}
#example1 {
  white-space: normal;
  overflow-wrap: normal;
}
#example2 {
  white-space: normal;
  overflow-wrap: anywhere;
}
#example3 {
  white-space: normal;
  overflow-wrap: break-word;
}

Вот HTML:

<h3>CSS Overflow Wrap</h3>
<p>The CSS overflow-wrap property is used to specify the circumstances in which the browser can break a line of text that's too long to fit within the line box onto multiple lines to prevent overflow.  You can either define the property with "normal" so that lines only break at unforced break points, like the space between two words, or with the values "anywhere" or "break-word" so that lines can break anywhere to prevent overflow.</p>
<p>This is dummy text. <strong>Thisismoremoremoredummytext. This is.</strong> This is more dummy text. This is more dummy text.
</p>
<p>This is dummy text. <strong>Thisismoremoremoredummytext. This is.</strong> This is more dummy text. This is more dummy text.
</p>
<p>This is dummy text. <strong>Thisismoremoremoredummytext. This is.</strong> This is more dummy text. This is more dummy text.
</p>

Вот результат:

Источник изображения

Переполнение текста CSS

Свойство CSS text overflow используется для управления отображением на странице встроенного содержимого, которое выходит за пределы его блочного контейнера.

Чтобы использовать свойство переполнения текста CSS, элемент контейнера блока должен быть определен свойством переполнения со значением, отличным от «visible». Чаще всего это определяется как «переполнение: скрыто». Кроме того, он должен быть определен свойством white-space и иметь значение «nowrap». В противном случае встроенное содержимое будет перенесено на следующую строку вместо отсечения.

Есть два значения свойства CSS text overflow. Давайте посмотрим на них ниже.

Зажим переполнения CSS

Установка для свойства переполнения текста CSS значения «clip» обрезает встроенное содержимое, которое выходит за пределы его блочного элемента контейнера на краю заполнения. Таким образом, посетители не смогут видеть контент за краем, где он обрезан.

Это почти идентично «скрытому» значению свойства переполнения CSS. Разница в том, что в клипе запрещена прокрутка любого вида, в том числе программная. Это означает, что поле элемента не является контейнером прокрутки.

Давайте посмотрим на пример ниже.

Вот CSS:

div {
  overflow: hidden;
  white-space: nowrap;
  width: 400px;
  text-overflow: clip;
  border: 1px solid #AAAAAA;
}

Вот HTML:

<h3>CSS Text Overflow Clip</h3>
<p>The div below is defined by the overflow property and set to "hidden" and the white-space property set to "nowrap. " That means you can apply the text-overflow property to the div. By setting it to "clip," the text contained inside the div will be clipped at the div's padding edge. Only the first line of the paragraph will show.</p>  
<div>This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.</div>

Вот результат:

Источник изображения

Эллипсис переполнения CSS

У вас есть возможность установить свойство переполнения текста CSS на «многоточие» по желанию. Это приведет к сокращению встроенного содержимого, которое выходит за пределы его элемента контейнера блока по краю заполнения – и немного больше, чтобы соответствовать многоточию. Это значение также запрещает любую прокрутку, включая программную прокрутку, которая сообщает браузеру, что поле элемента не является контейнером прокрутки. Таким образом, посетители не смогут видеть контент за краем, где он обрезан.

Вот пример.

Вот CSS:

div {
  overflow: hidden;
  white-space: nowrap;
  width: 600px;
  text-overflow: ellipsis;
  border: 1px solid #AAAAAA;
}

Вот HTML:

<h3>CSS Text Overflow Ellipsis</h3>
<p>The div below is defined by the overflow property and set to "hidden" and the white-space property set to "nowrap." That means you can apply the text-overflow property to the div. By setting it to "ellipsis," the text contained inside the div will be clipped at the div's padding edge. Some of the characters will also be replaced by the ellipsis character.</p>  
<div>This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.</div>

Вот результат:

Источник изображения

Контроль переполнения в ваших макетах

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

Источник записи: https://blog.hubspot.com

CSS | overflow-x Property — GeeksforGeeks

>

>

>

< html >

< head >

     < style >

     div.example1 {

         background-color: green;

         ширина: 80 пикселей;

         переполнение-x: прокрутка;

}

Div. Example2 {

Фоно-колокол: зеленый;

         ширина: 80 пикселей;

         переполнение-x: скрыто;

     }

      

     div.example3 {

         background-color:green;

         ширина: 80 пикселей;

         переполнение-x: авто;

}

Div. Example4 {

Фоно-цветовое: зеленый;

         ширина: 80 пикселей;

         переполнение-x: видимое;

     }

     style >

head >

< body >

     < h2 >Гики для гиков h2 >

      

      

 

< p >

         The overflow-x property specifies whether to

         clip the content, добавить полосу прокрутки или отобразить

        

         при переполнении по левому и правому краям.

P >

< > Заверше

< Div Класс = "Пример1" >

Geeksforgeeks Computer Science Portal

     div >

      

     < h3 >overflow-x: hidden: h3 >

     < div class = "example2" >

       

портал компьютерных наук

     div >

      

     < h3 >overflow-x: auto: h3 >

     < Div Класс = "Пример 3" >

Geeksforgeeks Portal Portal

div >

      

     < h3 >overflow-x: visible (default): h3 >

     < Div Класс = "Пример 4" >

Geeksforgeeks Portal

Div >

Body >

HTML >