Главная » Языки программирования

Html img overflow div

На чтение 11 мин
Содержание
  1. CSS свойство overflow
  2. Поддержка браузерами
  3. Значения свойства
  4. Версия CSS
  5. Наследуется
  6. Анимируемое
  7. Пример использования
  8. How can I keep images from overflowing its parent container?
  9. Как спрятать всё, что не поместилось в элементе. CSS-свойство overflow
  10. Значения overflow
  11. Ошибки при использовании overflow
  12. Наследуется ли свойство overflow
  13. Материалы по теме
  14. overflow
  15. Try it
  16. Constituent properties
  17. Syntax
  18. Values
  19. Description
  20. Formal definition
  21. Formal syntax
  22. Examples
  23. Demonstrating results of various overflow keywords
  24. HTML
  25. CSS
  26. Result
  27. Accessibility concerns
  28. Specifications
  29. Browser compatibility
  30. See also
  31. Found a content problem with this page?

CSS свойство overflow

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

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

overflow:"visible | hidden | scroll | auto | initial | inherit";
object.style.overflow = "hidden"

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

Значение Описание
visible Переполнение не обрезается, содержимое выходит за пределы размеров элемента. Это значение по умолчанию.
hidden Переполнение обрезается (контент, который выходит за размеры будет невидимым).
scroll Переполнение обрезается, но добавляется полоса прокрутки, позволяющая увидеть содержимое, которое выходит из заданных размеров.
auto Если переполнение обрезается, то полоса прокрутки будет добавлена автоматически, чтобы увидеть содержимое, которое выходит из заданных размеров.
initial Устанавливает свойство в значение по умолчанию.
inherit Указывает, что значение наследуется от родительского элемента.

Версия CSS

Наследуется

Анимируемое

Пример использования

   Свойство overflow. div  display : inline-block; /* выравниваем вертикально все элементы 
*/ margin-right : 30px; /* устанавливаем внешний отступ справа для элементов 
*/ width : 100px; /* устанавливаем ширину для блоков */ height : 100px; /* устанавливаем высоту для блоков */ border : 1px solid red; /* устанавливаем для блоков сплошную границу размером 1px красного цвета*/ > img  width : 125px; /* устанавливаем ширину для изображения */ height : 125px; /* устанавливаем высоту для изображения */ > .test  overflow : visible; /* переполнение не обрезается, содержимое выходит за пределы размеров элемента */ > .test2  overflow : hidden; /* переполнение обрезается (контент, который выходит за размеры будет невидимым) */ > .test3  overflow : scroll; /* переполнение обрезается, но добавляется полоса прокрутки */ > .test4  overflow : auto; /* если переполнение будет обрезано, то добавится полоса прокрутки автоматически */ >   class = "test">visible  src = nich.jpg alt = ничоси>
 class = "test2">hidden  src = nich.jpg alt = ничоси>
 class = "test3">scroll  src = nich.jpg alt = ничоси>
class = "test4">auto src = nich.jpg alt = ничоси>

Пример использования свойства overflow.

CSS свойства

© 2016-2023 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу basicweb.ru@gmail.com

Кажется, вы используете блокировщик рекламы 🙁

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

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

Источник

How can I keep images from overflowing its parent container?

I am trying to create a banner with my automated CSS slideshow. The entire content of the page should only be 70% width of the page and centered. So I have gutters on both sides of the page content. The banner is supposed to be positioned under the header. My images keep on overflowing its parent container. The HTML

 html>  head>  link rel="stylesheet" type="text/css" href="autoslide.css">  head>  body>  div id="container">  header>  h1>a href="autosliding.html"> Hayden Bradfielda>h1>  h2> Web Dev Student h2>  nav>  ul>  li>a href="autosliding.html">Homea>li>  li>a href="#">Abouta>li>  li>a href="#">Contact Usa>li>  ul>  nav>  header>  div id="slideshow">  img src="frog.jpg" alt="frog on a lillipad">  img src="lion.jpg" slt="roaring lion">  div>  div>  body> html> 
body  margin:0; padding:0; > #container  margin:0; padding:0; width:70%; margin-left:auto; margin-right:auto; > header  background-color:yellow; > h1  margin:0; padding:10px; > #slideshow  margin-left:auto; margin-right:auto; position:relative; height:40%; > img  position:absolute; opacity:0; > img:nth-child(1)  animation: xfade 10s 5s infinite; > img:nth-child(2)  animation: xfade 10s 0s infinite; > @keyframes xfade 0% opacity: 1; > 50%  opacity: 0; > 60%  opacity:1; > 100%  opacity:1; > >

Источник

Как спрятать всё, что не поместилось в элементе. CSS-свойство overflow

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

Чтобы указать, как должно отображаться содержимое элемента…

 
Константиновский Константин Константинович

В этом примере мы добавим контейнеру полосу прокрутки, если имя не будет в нём помещаться.

Значения overflow

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

overflow: visible

Значение hidden скрывает часть содержимого, которая не поместилась в контейнере.

overflow: hidden

Значение scroll добавляет полосы прокрутки.

overflow: scroll

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

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

Отображение при overflow: scroll и overflow: auto

Ошибки при использовании overflow

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

Использовать overflow: scroll для всего содержимого страницы — если так сделать, на странице появятся лишние полосы прокрутки.

Наследуется ли свойство overflow

Свойство не наследуется, но дочерние элементы будут отображаться с учётом значения overflow . Например, здесь текст «Я вообще не влезаю в эту строку» обрежется, если выйдет за пределы :

 
 
Я вообще не влезаю в эту строку

Для дочерних элементов можно прописать собственное значение overflow :

 
 
Я вообще не влезаю в эту строку

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

Чёрной рамкой обозначен родительский контейнер — по нему обрезается весь контент. Красной рамкой обведён дочерний элемент. Обратите внимание, что полоса прокрутки появилась именно у потомка, а не у родителя

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

overflow

The overflow CSS shorthand property sets the desired behavior when content does not fit in the parent element box (overflows) in the horizontal and/or vertical direction.

Try it

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* Keyword values */ overflow: visible; overflow: hidden; overflow: clip; overflow: scroll; overflow: auto; overflow: hidden visible; /* Global values */ overflow: inherit; overflow: initial; overflow: revert; overflow: revert-layer; overflow: unset;

Values

Overflow content is not clipped and may be visible outside the element’s padding box. The element box is not a scroll container. This is the default value of the overflow property.

Overflow content is clipped at the element’s padding box. There are no scroll bars, and the clipped content is not visible (i.e., clipped content is hidden), but the content still exists. User agents do not add scroll bars and also do not allow users to view the content outside the clipped region by actions such as dragging on a touch screen or using the scroll wheel on a mouse. The content can be scrolled programmatically (for example, by setting the value of the scrollLeft property or the scrollTo() method), in which case. The element box is a scroll container.

Overflow content is clipped at the element’s overflow clip edge that is defined using the overflow-clip-margin property. As a result, content overflows the element’s padding box by the value of overflow-clip-margin or by 0px if not set. Overflow content outside the clipped region is not visible, user agents do not add a scroll bar, and programmatic scrolling is also not supported. No new formatting context is created. To establish a formatting context, use overflow: clip along with display: flow-root . The element box is not a scroll container.

Overflow content is clipped at the element’s padding box, and overflow content can be scrolled into view using scroll bars. User agents display scroll bars in both horizontal and vertical directions if only one value is set, whether or not any content is overflowing or clipped. The use of this keyword, therefore, can prevent scroll bars from appearing and disappearing as content changes. Printers may still print overflowing content. The element box is a scroll container.

Overflow content is clipped at the element’s padding box, and overflow content can be scrolled into view. Unlike scroll , user agents display scroll bars only if the content is overflowing and hide scroll bars by default. If content fits inside the element’s padding box, it looks the same as with visible but still establishes a new formatting context. The element box is a scroll container.

Note: The keyword value overlay is a legacy value alias for auto . With overlay , the scroll bars are drawn on top of the content instead of taking up space.

Description

Overflow options include hiding overflowing content, enabling scroll bars to view overflow content or displaying the content flowing out of an element box into the surrounding area, and combinations there of.

The following nuances should be kept in mind while using the various keywords for overflow :

  • Specifying a value other than visible (the default) or clip for overflow creates a new block formatting context. This is necessary for technical reasons; if a float intersects with a scrolling element, it would forcibly rewrap the content after each scroll step, leading to a slow scrolling experience.
  • For an overflow setting to create the desired effect, the block-level element must have either a set height ( height or max-height ) or white-space set to nowrap .
  • Setting one axis to visible (the default) while setting the other to a different value results in visible behaving as auto .
  • The JavaScript Element.scrollTop property may be used to scroll through content in a scroll container, including when overflow is set to hidden .

Formal definition

  • overflow-x : as specified, except with visible / clip computing to auto / hidden respectively if one of overflow-x or overflow-y is neither visible nor clip
  • overflow-y : as specified, except with visible / clip computing to auto / hidden respectively if one of overflow-x or overflow-y is neither visible nor clip

Formal syntax

overflow =
[ visible | hidden | clip | scroll | auto ]

Examples

Demonstrating results of various overflow keywords

HTML

div> code>visiblecode> p class="visible"> Maya Angelou: "I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel." p> div> div> code>hiddencode> p class="hidden"> Maya Angelou: "I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel." p> div> div> code>clipcode> p class="clip"> Maya Angelou: "I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel." p> div> div> code>scrollcode> p class="scroll"> Maya Angelou: "I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel." p> div> div> code>autocode> p class="auto"> Maya Angelou: "I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel." p> div> div> code>overlaycode> p class="overlay"> Maya Angelou: "I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel." p> div>

CSS

body  display: flex; flex-wrap: wrap; justify-content: start; > div  margin: 2em; font-size: 1.2em; > p  width: 5em; height: 5em; border: dotted; margin-top: 0.5em; > div:nth-of-type(5), div:nth-of-type(6)  margin-top: 200px; > 
p.visible  overflow: visible; > p.hidden  overflow: hidden; > p.clip  overflow: clip; overflow-clip-margin: 1em; > p.scroll  overflow: scroll; > p.auto  overflow: auto; > p.overlay  overflow: overlay; >

Result

Accessibility concerns

A scrolling content area cannot be scrolled by a keyboard-only user, with the exception of users on Firefox (which makes the container keyboard focusable by default).

As a developer, to allow non-Firefox keyboard-only users to scroll the container, you will need to give it a tabindex using tabindex=»0″ . Unfortunately, when a screen reader encounters this tab-stop, they will have no context for what it is and their screen reader will likely announce the entirety of its contents. Giving it an appropriate WAI-ARIA role ( role=»region» , for example) and an accessible name (via aria-label or aria-labelledby ) can mitigate this.

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 18, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

Читайте также:  Using apache php mysql
Оцените статью