Div overflow: text-overflow — CSS: Cascading Style Sheets

css властивість overflow

• Головна
• css
• властивості
• overflow

---

Властивість overflow вказує, що зробити для переповненого елемента:

• Обрізати вміст, що поза межами елемента, без можливості його перегляду.
• Відобразити вміст, що поза межами елемента.
• Обрізати вміст, що поза межами елемента та для можливості перегляду обрізаного тексту, відобразити смуги прокрутки.

У CSS3 властивість overflow є скроченим записом для двох інших: overflow-x i overflow-y.

Для того, щоб побачити результат дії overflow, разом з ним для елементу треба прописати також висоту(height або max-height), або задати значення nowrap для white-space.

В стані чорнетки, існують три ключові слова, які можна буде використовувати в якості значень для overflow: no-display, no-content, clip

.

Нотатка:	Властивість працює лише для блокових елементів із заданою висотою або шириною (властивість height або width).
Нотатка:	JavaScript-властивість element.scrollTop може бути застосоване для елементу, навіть якщо він має встановлене значення hidden для overflow.

Запропонувати свою пораду чи нотатку

ПорадаНотатка

Синтаксис

overflow: visible|hidden|scroll|auto|initial|inherit;

Властивість overflow може отримувати 6 значень:

visible

За замовчуванням. Вміст не обрізається, може відображатися зовні блоку, в якому воно розташоване.

hidden

Контет обрізається, без надання прокрутки.

scroll

Вміст обрізається і браузер використовує елементи прокрутки, не має значення чи було обрізано вміст чи ні. Це уникає багатьох проблем щодо появи прокручувань і їх зникнення в динамічному середовищі. Принтери можуть друкувати переповнене вміст.

auto

Смуги прокручування з’являються, тільки при необхідності

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивості від свого батьківського елемента

Значення без задання:	visible
Наслідує:	Ні
Анімується:	Ні
JavaScript синтаксис:	object.style.overflow=»scroll»

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі

Переглядач
overflow	1. 0	4.0	1.0	1.0	7.0

Переглядач
overflow	1.0	1.0	1.0

Приклади

• Приклад 1
• Приклад 2
• Приклад 3
• Приклад 4

Динамічний приклад

Демонстрація роботи властивості
Приклад використання overflow.
Встановлює властивість overflow для прокрутки
div {


    width: 150px;


    height: 150px;


    overflow: scroll;


}
 
Додаткові посилання
overflow-y
overflow-x
 Переполненный контент — Изучите веб-разработку 
 Предыдущий
 Обзор: строительные блоки
 Следующий
 Переполнение — это то, что происходит, когда слишком много содержимого не помещается в поле элемента. В этом руководстве вы узнаете, что такое переполнение и как им управлять.
 
 Предпосылки:
 Базовая компьютерная грамотность,
 установлено базовое программное обеспечение, базовые знания
 работа с файлами, основы HTML (изучение
 Введение в HTML) и представление о том, как работает CSS (изучите
 Первые шаги CSS.)
 Цель:
 Чтобы понять переполнение и как им управлять.
 Все в CSS представляет собой коробку. Вы можете ограничить размер этих полей, назначив значения  ширины  и  высоты  (или  встроенный размер  и  размер блока  ).  Переполнение происходит, когда слишком много содержимого не помещается в поле.  CSS предоставляет различные инструменты для управления переполнением. По мере того, как вы продвигаетесь дальше с макетом CSS и написанием CSS, вы столкнетесь с большим количеством ситуаций переполнения.
 
 Давайте рассмотрим два примера, демонстрирующих поведение CSS по умолчанию при переполнении.
 Первый пример — ящик, ограниченный установкой высоты   . Затем мы добавляем контент, превышающий выделенное пространство. Содержимое переполняет поле и попадает в абзац ниже.
 Второй пример — слово в рамке. Коробка была сделана слишком маленькой для слова, и поэтому она вырывается из коробки.
 Вы можете задаться вопросом, почему CSS работает таким беспорядочным образом, отображая содержимое за пределами его предполагаемого контейнера. Почему бы не скрыть избыточный контент? Почему бы не масштабировать размер контейнера, чтобы он вмещал все содержимое?
 
 Везде, где это возможно, CSS не скрывает содержимое. Это может привести к потере данных. Проблема с потерей данных заключается в том, что вы можете этого не заметить. Посетители сайта могут этого не заметить. Если кнопка отправки в форме исчезает и никто не может заполнить форму, это может быть большой проблемой! Вместо этого CSS переполняется видимыми способами. Вы, скорее всего, увидите, что есть проблема. В худшем случае посетитель сайта сообщит вам, что контент перекрывается.
 
 Если вы ограничиваете поле шириной   или  высота  , CSS доверяет вам знать, что вы делаете. CSS предполагает, что вы управляете возможностью переполнения. Как правило, ограничение размера блока проблематично, если поле содержит текст. Текста может быть больше, чем вы ожидали при разработке сайта, или текст может быть больше (например, если пользователь увеличил размер шрифта).
 В следующих двух уроках объясняются различные подходы к изменению размеров элементов управления, которые менее подвержены переполнению. Однако, если вам нужен фиксированный размер, вы также можете контролировать поведение переполнения. Давайте читать дальше!
 Свойство  overflow  помогает управлять переполнением содержимого элемента. Используя это свойство, вы можете сообщить браузеру, как он должен обрабатывать содержимое переполнения.
  Значением по умолчанию типа значения    является  visible  . С этой настройкой по умолчанию можно увидеть контент, когда он переполняется.
 Чтобы обрезать содержимое при его переполнении, вы можете установить  overflow: hidden  . Это делает именно то, что он говорит: он скрывает переполнение. Помните, что это может сделать некоторый контент невидимым. Вы должны делать это только в том случае, если сокрытие контента не вызовет проблем.
 
 Вместо этого, возможно, вы хотели бы добавить полосы прокрутки, когда содержимое переполняется? Используя  overflow: scroll  , браузеры с видимыми полосами прокрутки всегда будут отображать их, даже если контента недостаточно для переполнения. Преимущество этого заключается в сохранении единообразия макета, а не в появлении или исчезновении полос прокрутки в зависимости от объема содержимого в контейнере.
  Удалите содержимое из поля ниже. Обратите внимание, как полосы прокрутки остаются, даже если в прокрутке нет необходимости. 
 В приведенном выше примере нам нужно прокручивать только по оси 
  y , однако мы получаем полосы прокрутки по обеим осям. Чтобы просто прокрутить по оси  y , вы можете использовать свойство  overflow-y , установив  overflow-y: scroll  .
 Вы также можете включить прокрутку вдоль оси x, используя  overflow-x  , хотя это не рекомендуется для размещения длинных слов! Если у вас длинное слово в маленьком поле, рассмотрите возможность использования разрыва слова  9.0030 или  свойство overflow-wrap . Кроме того, некоторые из методов, описанных в разделе Изменение размера элементов в CSS, могут помочь вам создать блоки, которые лучше масштабируются с различным объемом содержимого.
 Как и в случае с  scroll  , вы получаете полосу прокрутки в измерении прокрутки, независимо от того, достаточно ли содержимого, чтобы вызвать полосу прокрутки.
  Примечание:  Можно указать прокрутку по осям X и Y с помощью свойства  overflow , передав два значения. Если указаны два ключевых слова, первое применяется к  overflow-x  , а второй относится к  overflow-y  . В противном случае оба параметра  overflow-x  и  overflow-y  имеют одинаковое значение. Например,  overflow: scroll hidden  установит  overflow-x  в  scroll  и  overflow-y  в  hidden  .
 Если вы хотите, чтобы полосы прокрутки отображались только тогда, когда содержимого больше, чем может поместиться в поле, используйте  overflow: auto  . Это позволяет браузеру определить, должен ли он отображать полосы прокрутки.
  В приведенном ниже примере удаляйте содержимое, пока оно не поместится в поле. Вы должны увидеть, как исчезают полосы прокрутки. 
 Когда вы используете значения     scroll  и  auto  , вы создаете  контекст форматирования блока  (BFC). Это означает, что содержимое элемента box с этими значениями  overflow  приобретает автономный макет. Содержимое за пределами такого блока элементов не может попасть в блок элементов, и ничто из блока элементов не может попасть в окружающий макет. Это обеспечивает возможность прокрутки, так как все содержимое блока должно содержаться и не перекрываться, чтобы обеспечить единообразную прокрутку.
 Современные методы макета (описанные в макете CSS) управляют переполнением. Они в основном работают без предположений или зависимостей относительно того, сколько контента будет на веб-странице.
 Это не всегда было нормой. В прошлом некоторые сайты были построены с контейнерами фиксированной высоты, чтобы выровнять дно коробок. В противном случае эти коробки могли бы не иметь никакого отношения друг к другу. Это было хрупко. Если вы столкнетесь с полем, в котором содержимое перекрывает другое содержимое на странице в устаревших приложениях, теперь вы поймете, что это происходит с переполнением. В идеале вы проведете рефакторинг макета, чтобы не полагаться на контейнеры фиксированной высоты.
 При разработке сайта всегда помните о переполнении. Тестируйте проекты с большим и малым количеством контента. Увеличивайте и уменьшайте размер шрифта как минимум на два шага. Убедитесь, что ваш CSS надежен. Изменение значений переполнения для скрытия содержимого или добавления полос прокрутки зарезервировано для нескольких избранных случаев использования (например, если вы хотите иметь поле прокрутки).
 Вы дошли до конца этой статьи, но можете ли вы вспомнить самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы сохранили эту информацию, прежде чем двигаться дальше — см. Проверка своих навыков: переполнение.
 В этом уроке вы познакомились с концепцией переполнения. Вы должны понимать, что CSS по умолчанию не делает переполняющий контент невидимым. Вы обнаружили, что можете управлять потенциальным переполнением, а также что вам следует тестировать работу, чтобы убедиться, что она случайно не вызывает проблемного переполнения.
 В следующей статье мы рассмотрим наиболее распространенные значения и единицы измерения в CSS.
 Предыдущий
 Обзор: строительные блоки
 Следующие
 Обнаружили проблему с содержанием этой страницы? 
 Отредактируйте страницу на GitHub.
 Сообщить о проблеме с содержимым.
 Посмотреть исходный код на GitHub.
 Хотите принять больше участия?
 Узнайте, как внести свой вклад.
 Эта страница была последний раз изменена  4 мая 2023  участниками MDN.
 HTML/CSS: не работает скрытое переполнение, как исправить родительский div? 
 Извините за плохой английский, английский - второй язык
 Я скачал HTML-шаблон с
https://html5up.net/fractal
 Теперь я пытаюсь изменить фон при воспроизведении видео
 
        
            <заголовок>
                <автовоспроизведение видео с отключенным звуком, встроенное воспроизведение>
                     mp4">
                
                <дел>
                     
Виджет 
                    
помощник
                    <ул>
                        
Загрузить/p>
                        
Еще
                    
                

 видео{
    непрозрачность: 0,3;
    положение: абсолютное;
    минимальная ширина: 100%;
    минимальная высота: 100%;
    высота:авто;
    ширина: авто;
    
    верх:0;
    маржа: 0;
    переполнение: скрыто;
}
 

 #header {
  положение: родственник;
}
#заголовок видео {
  ширина: 100%;
  высота: 100%;
  положение: абсолютное;
  верх: 0px;
  слева: 0px;
  объект подходит: обложка;
}