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

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

'Web > CSS' 카테고리의 다른 글

[CSS] 배경 설정하기 - 컬러 배경 설정, 이미지 배경 설정, 배경 반복, 배경 위치 설정, 배경 스크롤 고정, 배경 이미지 크기 설정, 배경 속성 한꺼번에 적용 (0)	2023.03.30
[CSS] TEXT설정 - 6️⃣ 폰트/글꼴 설정, 웹폰트 적용, 구글 폰트 적용하기 (0)	2023.03.30
[CSS] TEXT설정 - 4️⃣ 글자 그림자 설정하기 (0)	2023.03.30
[CSS] TEXT 설정 - 3️⃣ 텍스트 효과 지우기, 텍스트 밑줄/텍스트 윗줄/ 텍스트 취소선, 작은 대문자 (0)	2023.03.30
[CSS] TEXT 설정 - 2️⃣ 글자 수평 정렬, 단락 들여쓰기, 줄 높이 (0)	2023.03.30