CSS의 오버플로 속성

7407 단어 css
overflow 속성은 상위 컨테이너 내의 텍스트를 제한하는 데 사용됩니다. 이미지와 함께 사용할 수도 있지만. 이미지와 함께 사용하기에 이상적인 속성은 아닙니다(이를 위한 다른 속성이 있습니다).

파티를 시작합시다:

CSS에는 4가지 "overflow"속성 값이 있습니다.

1. visible
2. hidden
3. scroll
4. auto


위의 모든 속성을 이해하기 위해 아래 코드를 사용할 것입니다.

<!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>
    <style>
        div{
            height: 400px;
            width: 300px;
            border: 4px solid black;
        }
    </style>
</head>

<body>
    <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney.
    </div>
</body>
</html>


1. 오버플로: 보이는



이것은 기본값이므로 이를 제공하면 아무 것도 변경되지 않고 텍스트가 계속 오버플로됩니다.


 div{
            height: 400px;
            width: 300px;
            border: 4px solid black;
            overflow: visible;
        }




2. "오버플로: 숨김"



'hidden' 값은 컨테이너에 넘쳐나는 모든 텍스트를 숨깁니다.

div{
            height: 400px;
            width: 300px;
            border: 4px solid black;
            overflow: hidden;
        }




3. "오버플로: 스크롤"



'scroll' 값은 넘치는 텍스트를 자르고 나머지 내용을 보기 위해 스크롤바가 추가됩니다.

div{
            height: 400px;
            width: 300px;
            border: 4px solid black;
            overflow: scroll;
        }




4. "오버플로: 자동"



이 값은 scroll과 유사하지만 필요할 때만(텍스트가 컨테이너를 넘을 때만) 스크롤바를 추가합니다.

div{
            height: 400px;
            width: 300px;
            border: 4px solid black;
            overflow: auto;
        }


위의 기사가 가치를 더해주기를 바랍니다.

나는 웹 개발과 관련된 매일 하나의 기사를 씁니다. 당신이 같은 것을 배우고 있다면 여기에서 나를 따르십시오.

멋진 하루 보내세요 😀!

내 트위터 핸들:
NGINX X X - Frame - Options 설정 추가, 페이지 끼 워 넣 기 방지
POJ 1015 배심원 인선 [동적 기획]

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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