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

Ответ 1

Пример:

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

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

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

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

Ответ 2

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

overflow: hidden:

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

Ответ 3

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

Ответ 4

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

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

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

Ответ 5

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

Ответ 6

Скажем, у вас есть div, который измеряет 100 x 100px

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

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

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

Ответ 7

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

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

: none:

test | | тест

видимость: скрытая:

test |                       | тест

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

Ответ 8

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

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

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