컨텐츠 길이가 길어질 경우, 말줄임 태그 사용
- 텍스트 말줄임
1. 너비
2. white-space: nowrap; 한줄
3. overflow: hidden; 넘침
4. text-overflow: ellipsis; (****)
- 여러줄 말줄임 -> 접두어 (크롬, 사파리만 사용 가능)
display: -webkit-box;
-webkit-line-clamp: 줄수;
-webkit-box-orient: vertical
★ 너비가 필수, 보통 아래 3가지 세트 ★
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
예시1)
<style>
.box1 {
/* 너비가 필수, 보통 아래 3가지 세트 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>

예시 2)
<style>
.box2 {
height: 80px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>

'CSS' 카테고리의 다른 글
| [css] box-shadow/text-shadow (0) | 2024.02.19 |
|---|---|
| [css] overflow, visibility (0) | 2024.02.19 |
| [css] border-radius (0) | 2024.02.19 |
| [css] 줄간격, 줄바꿈, 영문 대소문자, 공백 (0) | 2024.02.16 |
| [css] 밑줄, 세로 가운데 정렬 (2) | 2024.02.16 |