CSS에서 높이 너머로 숨기는 방법-CSS 튜토리얼-php.cn

CSS에서 높이 너머로 숨기는 방법

青灯夜游

풀어 주다： 2023-01-07 11:43:24

원래의

5018명이 탐색했습니다.

CSS에서는 Overflow-y 속성을 사용하여 높이 이상으로 숨기는 효과를 얻을 수 있습니다. 요소에 "overflow-y:hidden" 스타일만 추가하면 됩니다. Overflow-y 속성은 콘텐츠가 요소의 위쪽/아래쪽 가장자리를 넘을 때 발생하는 상황을 지정합니다. 값이 숨겨지면 초과 부분이 숨겨집니다.

CSS에서 높이 너머로 숨기는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS에서는 Overflow-y 속성을 사용하여 높이를 넘어서는 숨겨진 효과를 얻을 수 있습니다.

아래 코드 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:500px;
height:90px;
border:thin solid black;
overflow-y:hidden;
}
</style>
</head>
<body>

<div>
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
</div>
</body>
</html>

로그인 후 복사

Rendering:

CSS에서 높이 너머로 숨기는 방법

Description:

overflow-y 속성은 콘텐츠가 요소의 위쪽/아래쪽 가장자리를 오버플로할 때 발생하는 상황을 지정합니다. 값이 숨김인 경우 내용이 잘리고 초과된 부분이 숨겨집니다.

overflow-y 속성에는

값	설명
visible	기본값 값이 있습니다. 콘텐츠는 잘리지 않고 요소 상자 외부에 렌더링됩니다.
hidden	콘텐츠가 잘리고 나머지 콘텐츠는 표시되지 않습니다.
scroll	콘텐츠는 잘리지만 나머지 콘텐츠를 볼 수 있도록 브라우저에 스크롤 막대가 표시됩니다.
auto	콘텐츠가 잘리면 브라우저에 스크롤 막대가 표시되어 나머지 콘텐츠를 볼 수 있습니다.
no-display	내용이 내용 상자에 맞지 않으면 상자 전체를 삭제하세요.
no-content	콘텐츠 상자에 맞지 않으면 전체 콘텐츠를 숨깁니다.