오버플로:숨김과 표시:없음의 차이점은 무엇인가요?

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 속성은 브라우저 창의 너비를 기준으로 요소의 다소 또는 그 이상을 드러내는 데 사용될 수 있습니다.

오버플로 : 숨겨진 텍스트 가이 요소 밖으로 흐르면 스크롤 바가 표시되지 않는다고 말합니다. 디스플레이 : 없음 요소가 표시되지 않았다고 말합니다.

오버플로의 간단한 예:숨겨진 http://www.w3schools.com/Css/tryit.asp?filename=trycss_pos_overflow_hidden

해당 페이지에서 CCS를 편집하면 오버플로 속성(visible | hide | scroll | auto )과 디스플레이를 추가하는 경우의 차이점을 확인할 수 있습니다.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 100px를 측정합니다

그런 다음 Div가 오버플로되는 것처럼 많은 텍스트를 넣습니다. 사용하는 경우 overflow: hidden; 그러면 100x100에 맞는 텍스트는 표시되지 않으며 레이아웃에는 영향을 미치지 않습니다.

display: none 완전히 다릅니다. 나머지 페이지를 렌더링합니다 마치 만약 div 여전히 눈에 띄었습니다. 오버플로가 있더라도 고려됩니다. 그것은 단순히 공간을 떠납니다 div, 그러나 그것을 렌더링하지 않습니다. 둘 다 설정된 경우 : display: none; overflow: hidden; 그러면 표시되지 않으면 텍스트가 오버플로 표시되지 않으며 페이지는 보이지 않는 것처럼 렌더링됩니다. div 아직 거기에 있었다.

만들기 위해 div 렌더링에 전혀 영향을 미치지 않으면 둘 다에 영향을 미치지 않습니다 display: none; overflow: hidden; 설정하고 세트와 같은 일을해야합니다. height: 0;. 또는 width, 또는 둘 다, 페이지는 DIV가 전혀 존재하지 않는 것처럼 렌더링됩니다.

오버 플로 : 숨겨진 - 오버플로와 달리 콘텐츠의 오버플로를 숨 깁니다. 내부 내용이 크기보다 큰 고정 크기의 DIV에 스크롤바를 보여주는 자동

디스플레이 : 없음 - 요소를 숨기고 콘텐츠 레이아웃에 완전히 참여하지 않습니다.

추신 : 둘 사이에는 차이가 없으며 완전히 관련이 없습니다.

디스플레이 : 없음은 해당 태그가 페이지에 전혀 나타나지 않음을 의미합니다 (DOM을 통해 여전히 상호 작용할 수 있지만). 다른 태그 사이에 할당 된 공간은 없습니다. 오버 플로우 숨겨진 것은 태그가 특정 높이와 모든 텍스트 등으로 렌더링되므로 태그가 표시되도록 팽창 할 수 있습니다. 나는 당신이 묻는 것이 가시성이라고 생각합니다 : 숨겨진 것입니다. 이것은 디스플레이 없음과 달리 태그가 보이지 않지만 페이지에 공간이 할당됩니다. 예를 들어

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

디스플레이 : 없음은 다음과 같습니다.

테스트 | | 테스트

가시성 : 숨겨진 것은 다음과 같습니다.

테스트 | | 테스트

가시성 : 숨겨진 태그가 렌더링되며 페이지에는 표시되지 않습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top