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 파일
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 |