🌐WEB
[CSS3] 텍스트가 영역을 벗어날 때 해결법 (overflow 속성)
Cocoon_
2021. 10. 11. 10:00
반응형
🚀 텍스트의 양이 많아 영역을 벗어나는 경우에 대한 해결방법을 포스팅합니다.
CSS 속성 : overflow
1. 넘어간 영역 보이기
{overflow : visible}
📋 코드
<!doctype html>
<html>
<head>
<title>title</title>
<meta charset='utf-8'>
<style>
.visible{width:180px; height:60px; background:skyblue; overflow:visible}
</style>
</head>
<body>
<p class="visible">
Hello World! <br>
Hello World! <br>
Hello World! <br>
Hello World! <br>
</p>
</body>
</html>
👨🏻💻 결과
2. 넘어간 영역 숨기기
{overflow : hidden}
📋 코드
<!doctype html>
<html>
<head>
<title>title</title>
<meta charset='utf-8'>
<style>
.hidden{width:180px; height:60px; background:skyblue; overflow:hidden}
</style>
</head>
<body>
<p class="hidden">
Hello World! <br>
Hello World! <br>
Hello World! <br>
Hello World! <br>
</p>
</body>
</html>
👨🏻💻 결과
3. 스크롤 적용
{overflow : scroll}
📋 코드
<!doctype html>
<html>
<head>
<title>title</title>
<meta charset='utf-8'>
<style>
.scroll{width:180px; height:60px; background:skyblue; overflow:scroll}
</style>
</head>
<body>
<p class="scroll">
Hello World! <br>
Hello World! <br>
Hello World! <br>
Hello World! <br>
</p>
</body>
</html>
👨🏻💻 결과
📚 참고
참고 서적 - 웹코딩 시작하기 (저자 김태영)
반응형