В чем разница между переполнением: скрытым и отображением: нет
Вопрос
В чем разница между переполнением: скрытым и отображением: нет?
Решение
Пример:
.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>
отображение: нет будет:
тест | | тест
видимость:скрыто будет:
тест | | тест
В режиме видимости:скрытый тег отображается, но его просто не видно на странице.