본문 바로가기
Web/CSS

[CSS] TEXT설정 - 5️⃣ white-space, text-overflow, overflow

by coding-choonsik 2023. 3. 30.
728x90
반응형
SMALL

1. white-space

  • 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 결정하는 속성(nowrap, pre, pre-wrap, pre-line)

2. text-overflow

  • 텍스트를 줄바꿈하지 않았을 때 넘치는 텍스트를 어떻게 처리할지 결정하는 속성(clip, ellipsis)

 

3. overflow

  • 요소 내의 컨텐츠가 너무 커서 모두 보여주기 힘들 때 어떻게 보여줄지 결정하는 속성

<!DOCTYPE html>
<html lang="en">
<head>
    <title>css 텍스트5</title>
    <style>
        p {display: inline-block; width: 200px; border: 1px solid tomato;}
        .tof1 {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
        .tof2 {white-space: nowrap; overflow: hidden; text-overflow: clip;}
        .of1 {height: 100px; overflow: scroll;}
        .of2 {height: 100px; overflow-x: scroll; overflow-y: scroll;}
        .content {
            border: 3px dotted powderblue;
            width: 400px;
            padding: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .content:active {overflow: visible;}
    </style>
</head>
<body>
    <h2>css 텍스트5</h2>
    <p class="tof1">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro fugit doloremque dicta ipsam, aliquam est dolorem laudantium maiores eius assumenda harum doloribus adipisci at? Fugiat, sunt. Illo velit incidunt a?</p>
    <p class="tof2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro fugit doloremque dicta ipsam, aliquam est dolorem laudantium maiores eius assumenda harum doloribus adipisci at? Fugiat, sunt. Illo velit incidunt a?</p>
    <p class="of1">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro fugit doloremque dicta ipsam, aliquam est dolorem laudantium maiores eius assumenda harum doloribus adipisci at? Fugiat, sunt. Illo velit incidunt a?</p>
    <p class="of2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro fugit doloremque dicta ipsam, aliquam est dolorem laudantium maiores eius assumenda harum doloribus adipisci at? Fugiat, sunt. Illo velit incidunt a?</p>
    <p class="content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro fugit doloremque dicta ipsam, aliquam est dolorem laudantium maiores eius assumenda harum doloribus adipisci at? Fugiat, sunt. Illo velit incidunt a?</p>
</body>
</html>

 

 

 

📄HTML 파일

 

19_css텍스트5.html
0.00MB

 

 

728x90
반응형
LIST