CSS에서 오버플로우를 방지하는 방법

8627 단어 beginnerstutorialwebdevcss
이 짧은 설명서에서는 컨테이너 요소 주위의 어떤 위치에도 스크롤 막대가 표시되지 않도록 하는 방법을 보여 주는 CSS 오버플로우 속성을 소개합니다.

넘침은 무엇입니까?
때때로, 웹 사이트의 스타일을 설계할 때, 내용을 당신이 제공한 용기의 테두리에 넣을 수 없을 수도 있다.다시 말하면 그것은 용기에서 흘러나온다.

이런 상황이 발생했을 때, 너는 그것을 몸에 맞게 할 수도 있고, 잘라낼 수도 있다.만약 우리가 그것을 끊으려고 한다면, 이것이 바로 넘침 속성이 작용하기 시작하는 곳이다.
CSS 오버플로우를 사용하면 요소의 컨텐트를 표시하거나 숨기거나 스크롤할 수 있습니다.
중요 프롬프트: 오버플로우 속성은 요소가 블록 요소이고 정의된 높이가 있는 경우에만 유효합니다.그래서 이 두 가지가 있어야만 오버플로우 속성을 작동시킬 수 있다.
코드 예시로 설명해 드릴게요.

HTML 및 CSS 코드
HTML에서, 우리는div와container라는 클래스가 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
   <div class="container">
     Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit veniam, laborum voluptas repellat dolorem quas sit ut odio pariatur, delectus cumque voluptates id dolor at ullam facilis? Animi, officia sunt mollitia dolorem reiciendis impedit enim voluptatibus beatae labore consequuntur rerum! Molestias eaque dolore veniam laboriosam voluptatibus officiis quos, incidunt tenetur.

     Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit veniam, laborum voluptas repellat dolorem quas sit ut odio pariatur, delectus cumque voluptates id dolor at ullam facilis? Animi, officia sunt mollitia dolorem reiciendis impedit enim voluptatibus beatae labore consequuntur rerum! Molestias eaque dolore veniam laboriosam voluptatibus officiis quos, incidunt tenetur.
   </div>
</body>
</html>
컨테이너에는 두 개의 Lorem 자리 표시자 텍스트가 들어 있습니다.
지금 우리는 우리의 스타일을 수정해야 한다.css 파일, 다음 스타일 포함:
body {
  margin: 0;
  font-size: 30px;
  height: 100vh;
  display: grid;
  place-items: center;  
}

.container {
  width: 70%;
  color: gray;
  background-color: black;
}
본문에 대해서는 모든 경계를 삭제하고 글꼴 크기를 30px로 설정하고 너비를 설정하며 내용을 격자 위치로 정렬합니다.
텍스트 컨테이너의 경우 폭을 부모 컨테이너(바디)의 70%, 텍스트 색상을 회색, 배경색을 검은색으로 설정합니다.
다음은 현재 미리 보기입니다.

현재 통상적으로 한 상자는 내부의 내용에 적응하기 위해 자동으로 높이를 조절한다.그러나 우리가 높이를 설정한 후에 용기 자체보다 내용이 크면 내용이 넘친다.
시범을 보이기 위해서, .container 클래스 규칙 블록 내부 스타일에 높이를 추가합니다.css:
height: 170px;
결과는 다음과 같습니다.

위의 그림에서 보듯이 용기의 현재 높이는 170px이다.그러나 내용 자체가 용기에서 흘러나오고 있다.이 문제를 감안하여 넘치는 속성을 탐색해 봅시다.

CSS 오버플로우 값

보이다
첫 번째 값은 볼 수 있습니다. 추가하고 있습니다.컨테이너 그룹:
overflow: visible;
컨테이너를 지나 컨텐트가 표시되도록 허용합니다.오버플로우 컨테이너의 컨텐트에 대해서는 CSS가 기본적으로 표시됩니다.이것은 CSS에 넘침 속성이 없어도 용기의 범위를 넘어서는 이유를 설명한다.

숨겨졌어
두 번째 값은 숨겨져 있습니다.이제 오버플로우 속성의 값을 .container의 스타일 블록에 숨기도록 변경합니다.
overflow: hidden;

이렇게 하면 컨텐트가 편집되고 오버플로우가 숨겨집니다.내용 자체는 아직 페이지에 있지만 표시되지 않음을 주의하십시오.

종이말이
다음에 우리는 값이 굴러간다.오버플로우를 숨기기에서 .container 스타일 블록으로 변경하여 스크롤합니다.
overflow: hidden;
result for scroll
보시다시피 넘치는 내용은 숨겨져 있습니다. 용기의 x축과 y축에 스크롤 바가 추가되어 있습니다. 스크롤을 통해 나머지 내용을 볼 수 있습니다.
현재 왼쪽이나 오른쪽으로 스크롤하는 내용이 없어도 y축(즉 수직축)의 스크롤 막대만 표시하려면 overflow를 overflow-y로 변경할 수 있습니다.
overflow-y: scroll;

지금 우리는 밑에 더 많은 스크롤 바가 없다는 것을 볼 수 있다.
네가 짐작할 수 있는 것처럼 오버플로우-x가 하나 더 있다. 오버플로우-y와는 상반된다.

자동차
마지막으로 우리는 자동차가 있다.그러나 스크롤 막대는 컨텐트가 넘치는 경우에만 자동으로 추가됩니다.
따라서 컨테이너 요소의 오버플로우를 자동으로 설정하는 경우
overflow: auto;
HTML로 돌아가서 텍스트의 절반을 삭제하고 파일을 저장하면 다음과 같은 결과를 얻을 수 있습니다.

우리는 스크롤 바가 사라진 것을 볼 수 있다.만약 우리가 텍스트를 되돌려준다면, 스크롤 바가 다시 나타날 것이다.
이러한 예에서 우리는 텍스트만 사용했지만, 같은 경우에도 그림을 처리하는 데 적용된다.따라서 아주 큰 그림과 작은 용기가 있고, 용기에 오버플로우 hidden 를 설정하면 그림에서 넘치는 부분은 잘려집니다.
요컨대 이것이 바로 넘침이다.나는 네가 중학교 때부터 쓸모 있는 것들을 배울 수 있기를 바란다.
만약 당신이 이 화제에 대해 어떤 의문이 있다면, 평론에서 나에게 알려주세요.
읽어주셔서 감사합니다. 주말 잘 보내세요.
민감 어 검출 알고리즘 소결
수학 문제 필수 수치 범위

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage