Overflow y auto: CSS overflow-y property

Leave a Comment / Разное / By /

Содержание

overflow — CSS | MDN

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

Использование свойства overflow со значениями, отличными от visible, (значение, принятое по умолчанию), создаёт новый блочный контекст форматирования. Это технически необходимо, поскольку если бы float пересекался с элементом прокрутки, это потребовало бы обеспечить обтекание содержимого прокручиваемого элемента вокруг вторгающихся float’ов. Обтекание при этом было бы необходимо производить после каждого шага прокрутки заново, что привело бы к заметному замедлению прокрутки. Обратите внимание, что при программной установке атрибута scrollTop для соответствующего HTML-элемента, даже если overflow имеет значение hidden, элемент, возможно, придётся прокрутить.

Значения

visible
По умолчанию. Содержимое не обрезается, может отображаться снаружи блока, в котором оно расположено.
hidden
Контент обрезается, без предоставления прокрутки.
scroll
Содержимое обрезается и браузер использует элементы прокрутки, не важно было ли обрезано содержимое или нет. Это избегает многих проблем касательно появления прокруток и их исчезновения в динамичной среде. Принтеры могу печатать переполненное содержимое.
auto
Зависит от агента пользователя. Браузеры такие как Firefox предоставляют прокрутку, если содержимое переполняет блок.
Расширения Mozilla
-moz-scrollbars-none Этот API вышел из употребления и его работа больше не гарантируется.
Используйте overflow:hidden.
-moz-scrollbars-horizontal
Использование overflow-x (en-US) и overflow-y (en-US) предпочтительнее.
-moz-scrollbars-vertical
Использование overflow-x (en-US) и overflow-y (en-US) предпочтительнее.
-moz-hidden-unscrollable
Главным образом предназначен для внутреннего использования и для тем. Отключает прокрутку XML root элементов и <html>, <body> клавишами со стрелками и колесом мыши.
p {
     width: 12em;
     height: 6em;
     border: dotted;
     overflow: visible; 
}

visible (default)
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p { overflow: hidden; /* полосы прокрутки не предоставляются */ }

overflow: hidden
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p { overflow: scroll; /* всегда показывать полосы прокрутки */ }

overflow: scroll


Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p { overflow: auto; /* добавить полосы прокрутки, если это необходимо */ }

overflow: auto
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

BCD tables only load in the browser

Firefox (Gecko) Примечания

Из-за Firefox 3.6 (Gecko 1.9.2), свойство overflow неверно применяется к элементам table-group (<thead> , <tbody> , <tfoot>). Это поведение будет исправлено в следующих версиях.

Internet Explorer Примечания

Internet Explorer 4 — 6 увеличивает элемент с overflow:visible (значение по умолчанию), чтобы заполнить содержимое в нём. height/width действуют подобно min-height/min-width.

y | HTML и CSS с примерами кода

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

Блоки

Синтаксис

/* Content is not clipped */
overflow-y: visible;

/* Content is clipped, with no scrollbars */
overflow-y: hidden;

/* Content is clipped, with scrollbars */
overflow-y: scroll;

/* Let the browser decide */
overflow-y: auto;

/* Global values */
overflow-y: inherit;
overflow-y: initial;
overflow-y: unset;

Значения

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

Значение по-умолчанию: visible

Применяется к блочным элементам

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

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>overflow-y</title>
    <style>
      body {
        overflow-y: hidden; /* Убираем вертикальную полосу прокрутки */
      }
      .layer {
        width: 300px; /* Ширина блока */
        height: 150px; /* Высота блока */
        padding: 5px; /* Поля вокруг текста */
      }
    </style>
  </head>
  <body>
    <div>
      <h3>Гетерогенный голубой гель</h3>
      <p>
        Кондуктометрия мягко передает электронный способ
        получения независимо от последствий проникновения
        метилкарбиола внутрь.
      </p>
    </div>
  </body>
</html>

Комбинируйте overflow-y: auto и overflow-x: visible



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

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

Одним из возможных решений было бы увеличить ширину #inner и сделать ее равной ширине изображения, но мне это не разрешено. Я попытался вставить обертку (#outter), но это не сработало.

Кто-нибудь хочет, как решить эту проблему?

#outter {
  width: 200px;
  height: 200px;
  overflow-y: scroll;
}
#inner {
  overflow-x: visible;
  width: 200px;
  height: 200px;
}
img {
  width: 400px;
  height: 400px
}
<div>
  <div>
    <img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
  </div>
</div>
html css scrollbar
Поделиться Источник themis93     14 февраля 2017 в 16:00

2 ответа

  • Имитация ‘ overflow-y: auto; overflow-x: visible` на сортируемом объекте jQuery UI

    Вот jsFiddle, чтобы вы могли ясно видеть то, что я собираюсь описать: http://jsfiddle.net/c26SK/5 / У меня есть две коробки. Левая рука заполнена предметами, которые можно перетащить в правую коробку. Предметы в правом ящике можно переставить. Предметы складываются вертикально. Обе коробки имеют…

  • Overflow-x: hidden и overflow-y: visible добавляет полосы прокрутки

    У меня есть строка таблицы: <ul> <li>This</li> <li>is</li> <li>my</li> <li>cell</li> </ul> и некоторые CSS: UL { height: 30px; float: left } UL LI { width: 25%; height: 100%; float: left } что отлично работает. Однако когда я добавляю…


2

Вы можете использовать элемент обертки и переместить его влево, что выведет его из нормального документооборота. Этот плавающий элемент будет таким же большим, как и его содержимое, что приведет к растяжению/переполнению оси x, но не к прокрутке оси Y. Чтобы получить прокрутку по оси y, установите элементы управления высотой и переполнением на плавающей обертке.

/* Micro Clearfix - http://nicolasgallagher.com/micro-clearfix-hack/ */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.cf:after {
    clear: both;
}
.container {
  width: 200px;
  /* Following two properties, for demo, so you can see the container. */
  min-height: 400px;
  background-color: pink;
}
.img-wrap {
  float: left;
  height: 200px;
  overflow-y: scroll;
}
img {
  width: 400px;
  height: 400px;
}
<div>
  
  <div>
    <img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
  </div>
  
  <p>
    Lorem ipsum dolor.
  </p>
  
</div>

Поделиться

hungerstar     14 февраля 2017 в 16:21


0

Вы можете установить абсолютное положение изображения, что позволит ему переполнить свой контейнер:

#outter {
  width: 200px;
  height: 200px;
  overflow-y: scroll;
  overflow-x: visible;
}
#inner {
  overflow-x: visible;
  width: 200px;
  height: 200px;
}
img {
  width: 400px;
  height: 400px;
  position: absolute;
  top: 0;
  left: 0;
}
<div>
  <div>
    <img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
  </div>
</div>

Поделиться erwstout     14 февраля 2017 в 16:05

Похожие вопросы:


Overflow-x перезаписывается overflow-y

Похоже, что overflow-x и overflow-y ведут себя не так, как я ожидаю. Если я установлю overflow-x в видимое, а overflow-y в автоматическое, то overflow-x будет вести себя не как видимый, а как…


overflow-x: visible; не работает с overflow-y: auto; есть ли обходной путь?

я пытаюсь .item { width: 100px; overflow-x: visible; overflow-y: auto; } Но вертикальный overflow:auto, похоже, переопределяет горизонтальный fiddle: http://jsfiddle.net/xcUTV/ Есть ли какой-нибудь…


overflow-x: visible; overflow-y: auto; не работает — соответствует ли это стандартам?

У меня возникла проблема при разработке веб-страницы. Ни Firefox, ни Internet Explorer не будут представлять поведение, которое я ожидаю для следующего фрагмента кода: <div style=overflow-x:…


Имитация ‘ overflow-y: auto; overflow-x: visible` на сортируемом объекте jQuery UI

Вот jsFiddle, чтобы вы могли ясно видеть то, что я собираюсь описать: http://jsfiddle.net/c26SK/5 / У меня есть две коробки. Левая рука заполнена предметами, которые можно перетащить в правую…


Overflow-x: hidden и overflow-y: visible добавляет полосы прокрутки

У меня есть строка таблицы: <ul> <li>This</li> <li>is</li> <li>my</li> <li>cell</li> </ul> и некоторые CSS: UL { height: 30px; float: left…


overflow-y visible не работает при использовании overflow-x hidden?

Я использую overflow-x hidden, который работает. Но вы не можете использовать overflow-y в сочетании с ним. Итак, я проверил это … http:/ / www.brunildo.org / test/Overflowxy2. html Я что-то…


overflow-y переопределяет overflow-x

Мне нужен div , который имеет много контента и прокручивается горизонтально. Содержимое (inner div s) имеет выпадающие меню, и когда меню открываются, они должны отображаться за пределами внешних…


How to overflow-x: visible while overflow-y: scroll

MDN , говоря о переполнении, утверждает: Примечание MDN: установка одной оси в видимое (по умолчанию), а другой в другое значение приводит к тому, что видимое ведет себя как авто. Итак, в следующем…


Невозможно установить overflow-x visible и overflow-y auto

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


overflow-x и overflow-y не переопределяют переполнение

Я использую bootstraptable и пытаюсь сделать так, чтобы ячейки отображали переполненное содержимое, но только вниз (т. е. overflow-y). Дело в том, что bootstraptable css использует overflow: hidden…

Использование overflow-y с height auto в css



У меня есть div, где я хочу, чтобы полоса прокрутки ( overflow-y: auto; height: 300px; ) появлялась, если текст внутри нее слишком большой. Однако мой div уже содержит свойство height:auto; (для некоторого вертикального выравнивания). Есть ли в любом случае, что я могу сохранить height:auto и все еще иметь полосу прокрутки, появляющуюся, когда это необходимо ?

HTML:

<div class = 'valign scrollbar'>
 My Text
</div>

CSS:

.valign {
 height: auto;
}

.scrollbar {
 height: 300px;
 overflow-y: auto;
}
css scrollbar
Поделиться Источник Scipion     01 июня 2015 в 17:13

2 ответа

  • CSS-переход на ‘Overflow’?

    У меня есть footer с некоторым прокручиваемым контентом с overflow-y . Все остальное на странице очень плавно анимировано с переходами CSS, но поскольку полоса прокрутки появляется в нижнем колонтитуле только при наведении курсора, она выглядит очень глупо, когда у нее нет никакого перехода….

  • overflow — y auto и Стрелка не работают вместе

    У меня есть див со стрелой перед ним. проблема в том, что когда я добавляю: overflow-y: auto; стрела исчезает. https://jsfiddle.net/z95frkuv / #n { position: fixed; min-width: 140px; min-height:100px; max-height:400px; //overflow-y: auto; // need to remove this to see arrow border:1px solid #000;…


6

Похоже, вы ищете max-height , который ограничит высоту div указанным значением.

.scrollbar {
   max-height: 300px;
   overflow-y: auto;
}

Поделиться Josh Mein     01 июня 2015 в 17:17


2

Вы можете установить фиксированную высоту. Или установить максимальную высоту стиле css. Если вы хотите, чтобы он достигал не более 500 пикселей, например, вы бы позвонили

.scrollbar {
  max-height:500px;
  overflow-y: auto;
}

Это должно помочь вам установить предел тому, насколько большим может стать элемент.

Поделиться MiltoxBeyond     01 июня 2015 в 17:17

Похожие вопросы:


$(‘body’).css(‘overflow-y’, ‘auto’) не работает в Интернете explorer

Я пытаюсь иметь различное поведение браузера в зависимости от высоты окна. Я хочу , чтобы если пользователь находится на нетбуке, то мой скрипт просто активирует переполнение css-y до ‘auto’, так…


Как установить свойство height auto CSS?

Это вопрос CSS в asp.net году. У меня есть страница, которая окружена контейнером div. Это содержит div#contenthome , с div#flashhome внутри него. #Container и #contenthome свойство height…


CSS overflow-x и overflow-y широко не поддерживаются?

Странно, я думал, что overflow-x и overflow-y широко поддерживаются, но потом я просто увидел, что он поддерживается только для CSS3 ( http://reference.sitepoint.com/css/ переполнение ), так что IE…


CSS-переход на ‘Overflow’?

У меня есть footer с некоторым прокручиваемым контентом с overflow-y . Все остальное на странице очень плавно анимировано с переходами CSS, но поскольку полоса прокрутки появляется в нижнем…


overflow — y auto и Стрелка не работают вместе

У меня есть див со стрелой перед ним. проблема в том, что когда я добавляю: overflow-y: auto; стрела исчезает. https://jsfiddle.net/z95frkuv / #n { position: fixed; min-width: 140px;…


Собственность CSS «overflow-y: auto» может привести к очень неожиданным результатам

Следующий код является частью пользовательской страницы 404, которую я планирую использовать на своем веб-сайте. Однако есть большая проблема, когда я добавляю строку кода overflow-y: auto;…


Удалите overflow-x и overflow-y с помощью jQuery

Я хочу удалить overflow-x и overflow-y , используя jQuery. Я попробовал несколько методов, но они, похоже, не работают: Вот мой код: body #s4-workspace { left: 0; overflow-x: auto; overflow-y:…


overflow-y auto скрывает содержимое

с overflow-y:auto с overflow-y:scroll Есть ли какой-то способ иметь полосу прокрутки, если она переполняется (и не скрывает содержимое), но в то же время удалить ее, если она не переполняется?…


Как использовать overflow-y: auto на вертикальном гибком элементе?

Вот это fiddle . Вот это HTML <div> <div> <div> This is green header </div> <div…


CSS overflow-y: auto не работает, но я не знаю почему

Я поставил overflow-y: auto в свой тег тела css. Чего я ожидаю, так это того, что если содержание превышает свиток создается Если я прокручу его вниз, то увижу свой последний контент Но в моем коде…

Overflow CSS уроки для начинающих академия


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

This text is really long and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help the reader to scroll the content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.


CSS Overflow

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

Свойство overflow имеет следующие значения:

  • visible — По умолчанию. Переполнение не обрезается. Он вырисовывается вне поля элемента
  • hidden — Переполнение обрезается, а остальное содержимое будет невидимым
  • scroll — Переполнение обрезается, но для просмотра остальной части содержимого добавляется полоса прокрутки
  • auto — Если переполнение обрезано, необходимо добавить полосу прокрутки для просмотра оставшейся части содержимого

Примечание: Свойство overflow работает только для элементов блока с заданной высотой.

Примечание: В OS X Lion (на Mac) полосы прокрутки скрыты по умолчанию и отображаются только при использовании (даже если задано «переполнение: прокрутка»).

переполнение: видимый

По умолчанию переполнение является visible, что означает, что оно не обрезается и отображается вне поля элемента:

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

Пример

div {
    width: 200px;
    height: 50px;
    background-color: #eee;
    overflow: visible;
}

переполнение: скрытый

При значении hidden переполнение обрезается, а оставшаяся часть содержимого скрывается:

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

Пример

div {
    overflow: hidden;
}

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

Установка значения scroll , переполнение обрезается и полосы прокрутки добавляется, чтобы прокручивать внутри окна. Обратите внимание, что это добавит полосу прокрутки как горизонтально, так и вертикально (даже если она вам не нужна):

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

Пример

div {
    overflow: scroll;
}

переполнение: Авто

Значение auto аналогично scroll, только при необходимости добавляются полосы прокрутки:

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

Пример

div {
    overflow: auto;
}

overflow-x и overflow-y

Свойства overflow-x и overflow-y указывает, следует ли изменять overflow содержимого только по горизонтали или по вертикали (или оба):

overflow-x Указывает, что делать с левыми/правыми краями содержимого.
overflow-y Указывает, что делать с верхними/нижними краями содержимого.

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

Пример

div {
    overflow-x: hidden; /* Hide horizontal scrollbar */
    overflow-y: scroll; /* Add vertical scrollbar */
}

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

СвойствоDescription
overflowУказывает, что происходит, если содержимое переполнено полем элемента
overflow-xУказывает, что делать с левыми/правыми краями содержимого, если оно переполнено областью содержимого элемента
overflow-yУказывает, что делать с верхними/нижними краями содержимого, если оно переполнено областью содержимого элемента

CSS3-переполнение

Модуль CSS Overflow содержит функции CSS для обработки прокручиваемого переполнения, отображаемого на визуальных носителях (экранах устройств). CSS использует термин переполнение для описания содержимого блока, которое простирается за пределы одного из его краев, т.е. края области содержимого, поля, границы или отступа.

Управление переполнением

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

IE: 10
Edge: 12
Firefox: 52, 2 -moz
Chrome: 50, 4 -webkit-
Safari: 9, 3.1 -webkit-
Opera: 37, 11.5 -webkit-
iOS Safari: 9, 3.2 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 5, 4 -webkit-

1. Типы переполнения

Существует два типа переполнения, которое используется браузерами: переполнение эффектов рисования и прокручиваемое переполнение.

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

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

2. Прокрутка и обрезка переполнения: свойства overflow-x, overflow-y и overflow

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

Свойство overflow-x определяет обработку переполнения в горизонтальном направлении (т.е. переполнение с левой и правой сторон блока), а свойство overflow-y определяет обработку переполнения в вертикальном направлении (т.е. переполнение с верхней и нижней сторон блока).

Свойства не наследуются.

overflow-x, overflow-y
Значения:
visibleЗначение по умолчанию. Содержимое не обрезается, а отображается поверх границ блока-контейнера. Возможно перекрытие соседних блоков.
hiddenСодержимое блока обрезается без добавления какого-либо интерфейса прокрутки для просмотра содержимого вне области обрезки.
scrollСодержимое обрезается до области полей, при этом блок становится прокручиваемым контейнером. Если браузер использует механизм прокрутки, который виден на экране, например, полосу прокрутки, этот механизм отображается независимо от того, обрезано ли какое-либо его содержимое. Это позволяет избежать проблем с появлением и исчезновением полос прокрутки в динамической среде. Размеры контейнера при этом не меняются, а полоса прокрутки вставляется между внутренним краем границы и внешним краем поля элемента.
autoБраузер использует механизм прокрутки только при переполнении блока.
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Синтаксис

overflow-x: visible;
overflow-x: hidden;
overflow-x: scroll;
overflow-y: auto;
overflow-x: inherit;
overflow-x: initial;

Свойство overflow — сокращенное свойство, которое задает значения overflow-x и overflow-y в указанном порядке. Если второе значение опущено, оно копируется из первого.

Содержимое блочных элементов может переполнять блок в случае, когда для блока явно задана высота и/или ширина. Без указания высоты блок будет растягиваться, чтобы вместить содержимое, кроме случаев, когда для блока задано позиционирование position: absolute; или position: fixed;. Текст может переполнять блок по высоте, изображения — по высоте и ширине.

overflow
Значения:
visibleЗначение по умолчанию. Содержимое не обрезается, а отображается поверх границ блока-контейнера. Возможно перекрытие соседних блоков.
hiddenСодержимое блока обрезается без добавления какого-либо интерфейса прокрутки для просмотра содержимого вне области обрезки. Также предотвращает отображение фона или границ под плавающими элементами, для которых задано свойство float: left / right;.
scrollСодержимое обрезается до области полей, при этом блок становится прокручиваемым контейнером. Если браузер использует механизм прокрутки, который виден на экране, например, полосу прокрутки, этот механизм отображается независимо от того, обрезано ли какое-либо его содержимое. Это позволяет избежать проблем с появлением и исчезновением полос прокрутки в динамической среде. Размеры контейнера при этом не меняются, а полоса прокрутки вставляется между внутренним краем границы и внешним краем поля элемента.
autoБраузер использует механизм прокрутки только при переполнении блока.
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Синтаксис

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

3. Автоматическое многоточие

3.1. Многоточие при переполнении: свойство text-overflow

Свойство позволяет обрезать строчное содержимое в случае, когда оно не умещается в блок-контейнер, визуально обрезая его или отображая многоточием. Текст может переполниться, например, когда ему запрещается перенос, например, из-за white-space: nowrap или отдельное слово слишком длинное, чтобы уместиться.

Свойство работает только при задании следующих условий: должна быть определена ширина блока-контейнера, элемент должен иметь значения overflow: hidden и white-space: nowrap. Применяется только к блочным контейнерам.

Свойство не наследуется.

text-overflow
Значения:
clipЗначение по умолчанию. Текст обрезается в пределе области содержимого, при этом может отобразиться лишь часть символа.
ellipsisЗамещает текст, не уместившийся в блок, с помощью многоточия.
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Синтаксис

text-overflow: clip;
text-overflow: ellipsis;
text-overflow: initial;
text-overflow: inherit;

По материалам CSS Overflow Module Level 3

CSS свойство overflow

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div.scroll {
      background-color: #eee;
      width: 300px;
      height: 200px;
      overflow: scroll;
      }
      div.hidden {
      background-color: #eee;
      width: 300px;
      height: 200px;
      overflow: hidden;
      }
      div.auto {
      background-color: #eee;
      width: 300px;
      height: 200px;
      overflow: auto;
      }
      div.visible {
      background-color: #eee;
      width: 300px;
      height: 200px;
      overflow: visible;
      }
      div.overlay {
      background-color: #eee;
      width: 300px;
      height: 200px;
      overflow: overlay;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства overflow</h3>
    <h4>overflow: scroll</h4>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</div>
    <h4>overflow: hidden</h4>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</div>
    <h4>overflow: auto</h4>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</div>
    <h4>overflow: visible</h4>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</div>
    <br/>
    <br/>
    <h4>overflow: overlay</h4>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</div>
  </body>
</html>

CSS свойство overflow-y


Пример

Показать различные значения свойства overflow-y:

div.ex1 {
переполнение-y: прокрутка;
}

div.ex2 {
overflow-y: скрыто;
}

div.ex3 {
overflow-y: авто;
}

div.ex4 {
overflow-y: visible;
}

Попробуй сам »

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

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

Совет: Используйте свойство overflow-x для определения обрезки по левому и правому краю.

Значение по умолчанию: видимые
Унаследовано: нет
Анимируемые: нет. Прочитать про animatable
Версия: CSS3
Синтаксис JavaScript: объект .style.overflowY = «прокрутка» Попытайся

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

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

Числа, за которыми следует -ms-, укажите первую версию, которая работала с приставка.

Объект
переполнение 4.0 9,0
8,0 -мс-		 1,5 3,0 9,5

Синтаксис CSS

переполнение-y: видимый | скрытый | прокрутка | авто | начальный | наследование;

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

Значение Описание Играй
видимый Контент не обрезан, и он может отображаться за пределами поля контента.Это значение по умолчанию Играй »
скрыто Контент обрезан — и механизма прокрутки нет Играй »
свиток Контент обрезан, и предусмотрен механизм прокрутки Играй »
авто Должен быть предусмотрен механизм прокрутки для переполненных ящиков Играй »
начальный Устанавливает для этого свойства значение по умолчанию.Читать про начальные Играй »
наследовать Наследует это свойство от своего родительского элемента. Читать про наследство

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

Учебник

CSS: переполнение CSS

Ссылка на HTML DOM: свойство overflowY



overflow-y — CSS: каскадные таблицы стилей

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

 
переполнение-y: видимое;
переполнение-y: скрыто;
переполнение-у: клип;
переполнение-y: прокрутка;
переполнение-у: авто;


переполнение-у: наследовать;
переполнение-y: начальное;
переполнение-y: не установлено;

Свойство overflow-y указано как одно ключевое слово, выбранное из списка значений ниже.

Если overflow-x — скрыто , scroll или auto и это свойство — visible (по умолчанию), будет неявно вычислено auto .

Значения

видимые
Содержимое не обрезается и может отображаться за пределами верхнего и нижнего краев поля заполнения.
скрыто
Содержимое обрезается, если необходимо, чтобы оно уместилось по вертикали в поле заполнения. Полосы прокрутки не предусмотрены.
зажим
Как и для , скрытого , содержимое обрезается до поля заполнения элемента. Разница между clip и hidden заключается в том, что ключевое слово clip также запрещает любую прокрутку, включая программную.Поле не является контейнером прокрутки и не запускает новый контекст форматирования. Если вы хотите запустить новый контекст форматирования, вы можете использовать display: flow-root для этого.
свиток
Содержимое обрезается, если необходимо, чтобы оно уместилось по вертикали в поле заполнения. Браузеры отображают полосы прокрутки независимо от того, обрезано ли какое-либо содержимое. (Это предотвращает появление или исчезновение полос прокрутки при изменении содержимого.) Принтеры по-прежнему могут печатать переполненное содержимое.
авто
Зависит от пользовательского агента. Если содержимое помещается внутри поля заполнения, оно выглядит так же, как видимое , но все же устанавливает новый контекст форматирования блока. Настольные браузеры предоставляют полосы прокрутки при переполнении содержимого.
 видимый | скрытый | зажим | свиток | auto

Настройка поведения переполнения

HTML 
  
    
  
  •   overflow-y: hidden  - скрывает текст за пределами поля.
  
    
    Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur.
    
    
  
    • 

  
  •   overflow-y: scroll  - всегда добавляет полосу прокрутки
  
    
    Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat.Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur.
    
    
  
    • 

  
  •   overflow-y: visible  - при необходимости отображает текст за пределами поля.
  
    
    Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur.
    
  
    • 

  
  •   overflow-y: auto  - в большинстве браузеров, эквивалент  scroll 
  
    
    Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur.
    
  
    •
CSS 
  # div1,
# div2,
# div3,
# div4 {
  граница: сплошной черный 1px;
  ширина: 250 пикселей;
  высота: 100 пикселей;
}

# div1 {переполнение-y: скрыто; margin-bottom: 12px;}
# div2 {переполнение-у: прокрутка; margin-bottom: 12px;}
# div3 {переполнение-y: видимый; margin-bottom: 120px;}
# div4 {переполнение-у: авто; margin-bottom: 120px;}
Результат

таблиц BCD загружаются только в браузере

overflow — CSS: Cascading Style Sheets

Это свойство является сокращением для следующих свойств CSS:

 
перелив: видимый;
переполнение: скрыто;
перелив: зажим;
переполнение: прокрутка;
перелив: авто;
переполнение: скрыто видимым;


переполнение: наследование;
переполнение: начальное;
переполнение: не установлено;

Свойство overflow определяется как одно или два ключевых слова, выбранных из списка значений ниже.Если указаны два ключевых слова, первое применяется к overflow-x , а второе — к overflow-y . В противном случае для overflow-x и overflow-y устанавливается одно и то же значение.

Значения

видимые
Содержимое не обрезается и может отображаться за пределами поля заполнения.
скрыто
Содержимое при необходимости обрезается, чтобы поместиться в защитную коробку. Полосы прокрутки не предусмотрены, и поддержка, позволяющая пользователю прокручивать (например, перетаскивая или используя колесо прокрутки), не разрешена.Контент можно прокручивать программно (например, путем установки значения свойства, такого как offsetLeft ), так что элемент по-прежнему является контейнером прокрутки.
зажим
Как и для , скрытого , содержимое обрезается до поля заполнения элемента. Разница между clip и hidden заключается в том, что ключевое слово clip также запрещает любую прокрутку, включая программную. Поле не является контейнером прокрутки и не запускает новый контекст форматирования.Если вы хотите запустить новый контекст форматирования, вы можете использовать display: flow-root для этого.
свиток
Содержимое при необходимости обрезается, чтобы поместиться в защитную коробку. Браузеры всегда отображают полосы прокрутки независимо от того, обрезано ли какое-либо содержимое, что предотвращает появление или исчезновение полос прокрутки при изменении содержимого. Принтеры могут по-прежнему печатать переполненное содержимое.
авто
Зависит от пользовательского агента. Если содержимое помещается внутри поля заполнения, оно выглядит так же, как видимое , но все же устанавливает новый контекст форматирования блока.Настольные браузеры предоставляют полосы прокрутки при переполнении содержимого.
накладка
Действует так же, как auto , но полосы прокрутки отображаются поверх содержимого, а не занимают место. Поддерживается только в браузерах на основе WebKit (например, Safari) и Blink (например, Chrome или Opera).
Расширения Mozilla
-moz-scrollbars-none [1]
Вместо этого используйте overflow: hidden .
-moz-scrollbars-горизонтально [1]
Используйте вместо этого overflow-x : scroll и overflow-y : hidden или overflow: hidden scroll .
-moz-полосы прокрутки вертикальные [1]
Используйте вместо этого overflow-x : hidden и overflow-y : scroll или overflow: scroll hidden .
-моз-скрытый-не прокручиваемый
Используйте вместо него overflow: clip .

[1] Начиная с Firefox 63, эта функция находится за настройкой параметров функции. В about: config установите layout.css.overflow.moz-scrollbars.enabled от до true

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

Указание значения, отличного от visible (по умолчанию) или clip создает новый контекст форматирования блока. Это необходимо по техническим причинам — если поплавок пересекается с элементом прокрутки, он принудительно перематывает содержимое после каждого шага прокрутки, что приводит к медленной прокрутке.

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

Установка одной оси на видимый (по умолчанию) при установке другой на другое значение приводит к видимому , ведущему себя как авто .

Свойство JavaScript Element.scrollTop можно использовать для прокрутки элемента HTML, даже если переполнение установлено на скрыто .

 [видимый | скрытый | зажим | свиток | авто] {1,2}

Установка различных значений переполнения для текста

HTML 
  

     видимый 
    

     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

  


  

     скрытый 
    

     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
    

  


  

     прокрутка 
    

     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
    

  


  

     авто 
    

     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
CSS 
  кузов {
  дисплей: гибкий;
  justify-content: пространство вокруг;
}

div {
  маржа: 1em;
  размер шрифта: 1.2em;
}

п {
  ширина: 8em;
  высота: 5em;
  граница: пунктирная;
}

p.visible {
  перелив: видимый;
}

p.hidden {
  переполнение: скрыто;
}

p.scroll {
  переполнение: прокрутка;
}

p.auto {
  перелив: авто;
}
Результат

Таблицы BCD загружаются только в браузере

overflow | CSS-уловки

Свойство overflow управляет тем, что происходит с содержимым, выходящим за его границы: представьте, что div , в котором вы явно установили ширину 200 пикселей, но содержит изображение шириной 300 пикселей.Это изображение будет выступать из div и по умолчанию будет видимым . Если вы установите значение overflow на hidden , изображение будет обрезано на 200 пикселей.

  div {
  переполнение: видимое | скрытый | свиток | авто | наследовать
}

Значения

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

Помните, что текст будет естественным образом переноситься в конец элемента (если не изменить пробел), поэтому текст редко будет причиной переполнения.Если высота не задана, текст также просто подтолкнет элемент выше. Переполнение чаще возникает, когда заданы явные значения ширины и высоты, и было бы нежелательно, чтобы какой-либо контент выплеснулся наружу, или когда прокрутка явно избегается.

видимый

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

Здесь важно помнить, что, даже если содержимое отображается за пределами поля, оно не влияет на поток страницы.Например:

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

Скрытый

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

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

Свиток

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

Следует отметить, что с этим значением вы получаете ОБЕ горизонтальные и вертикальные полосы прокрутки независимо от того, что, даже если для содержимого требуется только одна или другая.

Прокрутка импульса

iOS может быть включена для этого значения с помощью -webkit-overflow-scrolling .

Примечание: В OS X Lion, когда полосы прокрутки настроены на отображение только при использовании, прокрутка больше похожа на auto , в которой отображаются только необходимые полосы прокрутки.

Авто

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

переполнение-x и переполнение-y

Также можно управлять переполнением содержимого по горизонтали или вертикали с помощью свойств overflow-x и overflow-y . Например, в демонстрации ниже горизонтальное переполнение можно прокручивать, в то время как текст, выходящий за пределы высоты поля, скрыт:

  .box {
  переполнение-y: скрыто;
  переполнение-x: прокрутка;
}

Сброс поплавка

Как ни странно, одним из наиболее популярных способов использования настройки переполнения является очистка числа с плавающей точкой.Настройка переполнения не сбрасывает поплавок в элементе , а само очищает . Это означает, что элемент с переполнением (любое значение, кроме visible ) будет расширяться настолько, насколько это необходимо, чтобы охватить дочерние элементы внутри, которые перемещаются (вместо сворачивания), при условии, что высота не объявлена. Как это:

Лучшим методом очистки поплавка является clearfix, поскольку он не требует, чтобы вы изменяли свойство переполнения так, как вам не нужно.

Создание контекста форматирования блока

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

Это взято из замечательного поста Николь Салливан, который вдохновил медиа-объект.

Можно ли стилизовать полосы прокрутки с помощью CSS?

Раньше вы могли стилизовать полосы прокрутки в IE (v5.5?), Но не более того. Теперь вы можете снова стилизовать их в браузерах WebKit. Если вам нужны настраиваемые полосы прокрутки в разных браузерах, обратите внимание на JavaScript.

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

Демо

Демонстрации для этой статьи взяты с этой страницы-примера.

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

Настольный ПК
Chrome Firefox IE Edge Safari
90 81 11 90 TP
Mobile /
Android Chrome Android Firefox Android iOS Safari 90 87 90 14.5

Связанные

Дополнительная информация

scrollbar — Использование overflow-y с автоматической высотой в css

scrollbar — Использование overflow-y с высотой auto в css — qaru

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил

Просмотрено 5к раз

У меня есть div, в котором я хочу, чтобы полоса прокрутки ( overflow-y: auto; height: 300px; ) появлялась, если текст внутри него слишком большой.Однако мой div уже содержит свойство height: auto; (ради некоторого вертикального выравнивания). Могу ли я сохранить высоту : авто и по-прежнему отображать полосу прокрутки, когда это необходимо?

HTML:

  

 Мой текст

CSS:

  .valign {
 высота: авто;
}

.полоса прокрутки {
 высота: 300 пикселей;
 переполнение-у: авто;
}

Создан 01 июн.

Сципион

9,24977 золотых знаков5959 серебряных знаков120120 бронзовых знаков

1

Похоже, вы ищете max-height, который ограничит высоту div предоставленным значением.

  .scrollbar {
   максимальная высота: 300 пикселей;
   переполнение-у: авто;
}

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

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