В чем разница между переполнением: скрытым и отображаемым: none

Question

В чем разница между переполнением: скрытым и отображаемым: нет?

Answer 1

Пример:

.oh 
{ 
    height: 50px; 
    width: 200px; 
    overflow: hidden; 
} 

Если текст в блоке с этим классом больше (больше), чем то, что может отобразить эту коробочку, избыток будет просто скрыта. Вы увидите только начало текста.

display: none; просто скроет блок.

У вас также есть visibility: hidden;, который скрывает содержимое блока, но блок все равно будет находиться в макете, перемещая вещи вокруг.

Answer 2

Overflow: hidden просто говорит, что если текст течет за пределами этого элемента, полосы прокрутки не отображаются. display: none говорит, что элемент не отображается.

Answer 3

Допустим, у вас есть div, который измеряет 100 х 100px

Затем положить целую кучу текста в него, например, она переполняет DIV. Если вы используете overflow: hidden;, тогда текст, который вписывается в 100x100, не будет отображаться и не повлияет на макет.

display: none полностью отличается. Он отображает остальную страницу , как если бы, если div все еще был виден. Даже если есть переполнение, это будет учтено. Он просто оставляет место для div, но не отображает его. Если оба параметра установлены: display: none; overflow: hidden;, то он не будет отображаться, текст не будет переполняться, и страница будет отображаться так, как будто невидимые div все еще были там.

Для того, чтобы сделать div никак не повлиять на рендеринг, необходимо установить и display: none; overflow: hidden;, а также сделать что-то вроде height: 0;. Или с помощью width или обоих, то страница будет отображаться так, как будто div не существует вообще.

Answer 4

display: none удаляет элемент со страницы, и поток страницы действует так, как будто его вообще нет.

overflow: hidden:

CSS-overflow: hidden свойство может быть использовано, чтобы выявить более или менее элемента на основе ширины окна браузера.

Answer 5

display: none означает, что указанный тег не будет отображаться на странице вообще (хотя вы все еще можете взаимодействовать с ним через dom). Между другими тегами не будет выделено пространство. Сбой переполнения означает, что тег визуализируется с определенной высотой и любым текстом и т. Д., Что приведет к расширению тега для его отображения. Я думаю, что вы хотите спросить - видимость: скрытая. Это означает, что в отличие от отображения нет, тег не отображается, но для него выделяется пространство на странице.так, например

<span>test</span> | <span>Appropriate style in this tag</span> | <span>test</span> 

дисплей: никто не будет:

тест |   | Тест

видимость: скрытый будет:

тест |                                             | test

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

Answer 6

Простой пример переполнения: скрытый http://www.w3schools.com/Css/tryit.asp?filename=trycss_pos_overflow_hidden

При редактировании CCS на этой странице, вы можете увидеть разницу между переливом Атрибуты (видимый | скрытые | прокрутки | авто) - и если вы добавите дисплей: нет в css вы увидите, что весь блок контента исчезает.

В принципе, это способ управления компоновкой и «потоком» элемента - если вы разрешаете пользователю вводить данные (из поля CMS), для рендеринга в блоке фиксированного размера вы можете настроить атрибут переполнения, чтобы остановить увеличение поля по размеру и, следовательно, нарушать макет страницы. (наоборот, отображение: ни один не позволяет отображать элемент и, тем самым, перетаскивает всю страницу)

Answer 7

переполнение: скрытое - скрывает переполнение содержимого, в отличие от переполнения: авто, который показывает полосы прокрутки на фиксированном размере div, где это внутреннее содержание больше, чем его размер

дисплей: нет - не скрывает элемент, и он полностью не участник в макете контента

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

Answer 8

По умолчанию элементы HTML имеют высоту, необходимую для содержания их содержимого.

Если вы укажете элемент HTML фиксированной высоты, он может быть недостаточно большим, чтобы содержать его содержимое. Так, например, если у вас есть пункт с фиксированной высотой и синим фоном:

<p>This is an example paragraph. It has some text in it to try and give it a reasonable height. In a separate style sheet, we’re going to give it a blue background and a fixed height. If we add overflow: hidden, we won’t see any text that extends beyond the fixed height of the paragraph. Until then, the text will “overflow” the paragraph, extending beyond the blue background.</p> 

p { 
    background-color: #ccf; 
    height: 20px; 
} 

Текста в пункте будет расширить за пределами нижнего края абзаца.

Свойство overflow позволяет изменить поведение по умолчанию. Так что, если вы добавили overflow: hidden:

p { 
    background-color: #ccf; 
    height: 20px; 
    overflow: hidden; 
} 

Тогда вы не увидите какой-либо из текста за пределы нижнего края абзаца. Он будет привязан к фиксированной высоте абзаца.

display: none просто заставит весь абзац (визуально) исчезнуть, синий фон и все, как если бы он вообще не отображался в HTML.