В чем разница между overflow: hidden и display: none

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

Допустим, у вас есть div размером 100 x 100 пикселей.

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

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

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

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

overflow: hidden:

The CSS overflow: hidden property can be used to reveal more or less of an element based on the width of the browser window.

Пример:

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

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

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

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

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

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

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

тест |   | тестовое задание

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

тест |                   NB6SP66BSP666 тестовое задание

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

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

Если вы отредактируете CCS на этой странице, вы увидите разницу между атрибутами переполнения (visible | hidden | scroll | auto) - и если вы добавите display: none в css, вы увидите, что весь блок содержимого исчезает.

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

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

display: none - скрывает элемент и полностью не участвует в разметке контента

P.S. между ними нет разницы, они совершенно не связаны

По умолчанию элементы 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.