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

StackOverflow https://stackoverflow.com/questions/132649

  •  02-07-2019
  •  | 
  •  

Вопрос

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

Это было полезно?

Решение

Пример:

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

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

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

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

Другие советы

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

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

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

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

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

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

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

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

Допустим, у вас есть 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 вообще не существовало.

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

отображать:none — скрывает элемент и полностью не участвует в макете контента.

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

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

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

отображение: нет будет:

тест | | тест

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

тест | | тест

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top