반응형
CSS를 이용하여 텍스트가 한 줄일 때는 '...'으로 보이게 하고, 여러 줄일 때는 지정한 줄 수 이후에 '...'으로 보이게 하는 방법에 대해 설명드리겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
/* 한 줄 ... */
.ellipsis-one-line {
white-space: nowrap; /* 줄 바꿈 방지 */
overflow: hidden; /* 넘치는 부분 숨김 */
text-overflow: ellipsis; /* 넘친 텍스트를 ...으로 표시 */
}
/* 여러 줄 ... */
.ellipsis-multiple-lines {
display: -webkit-box; /* -webkit- 접두사는 크로스브라우징을 위해 추가 */
-webkit-line-clamp: 3; /* 보여질 줄 수 (여기서는 3줄로 설정) */
-webkit-box-orient: vertical; /* 세로 방향으로 정렬 */
overflow: hidden; /* 넘치는 부분 숨김 */
text-overflow: ellipsis; /* 넘친 텍스트를 ...으로 표시 */
}
</style>
</head>
<body>
<div class="ellipsis-one-line" style="width: 200px;">
This is a long text that will be truncated with an ellipsis when it exceeds one line.
</div>
<div class="ellipsis-multiple-lines" style="width: 200px;">
This is a longer text that will be truncated with an ellipsis after three lines when it exceeds the specified line count.
</div>
</body>
</html>위의 코드에서는 CSS를 이용하여 각각의 클래스를 정의하였습니다.
- .ellipsis-one-line: 한 줄일 때는 white-space: nowrap을 사용하여 줄 바꿈을 방지하고, overflow: hidden으로 넘치는 부분을 숨깁니다. 그리고 text-overflow: ellipsis를 이용하여 넘친 텍스트를 '...'으로 표시합니다.
- .ellipsis-multiple-lines: 여러 줄일 때는 -webkit-line-clamp 속성을 사용하여 지정한 줄 수 이후에 /.../을 표시합니다. -webkit-box와 -webkit-box-orient를 이용하여 세로 방향으로 정렬하고, overflow: hidden으로 넘치는 부분을 숨깁니다.
위의 예시에서는 각각의 div 요소에 width: 200px를 설정하여 넘치는 부분을 확인할 수 있도록 하였습니다. 원하는 크기로 지정하여 사용하시면 됩니다. 이렇게 설정하면 텍스트가 한 줄일 때는 일정 너비 이상으로 넘치지 않게되며, 여러 줄일 때는 지정한 줄 수 이후에 '...'로 보이도록 처리됩니다.
반응형
'Style sheet > CSS' 카테고리의 다른 글
| [CSS] 미디어 쿼리에서 all and (max-width) 사용 이유 (0) | 2024.01.30 |
|---|---|
| [CSS] CSS로 삼각형 만드는 방법 (0) | 2023.11.15 |
| [CSS] Flexbox와 Grid 레이아웃 (0) | 2023.07.20 |
| [CSS] CSS3의 새로운 기능과 애니메이션 (0) | 2023.07.19 |
| [CSS] 반응형 디자인과 미디어 쿼리 (0) | 2023.07.19 |
