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

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

14
css hidden overflow

8 ответов

пример:

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

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

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

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

27

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

overflow: hidden:

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

9

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

5

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

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

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

2

по умолчанию 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.

2

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

1

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

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

П. С. Нет никакой разницы между двумя, они не имеют никакого отношения

1

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

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

display: none будет:

тест | | тест

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

тест | | тест

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

1