[CSS] 말 줄임 효과 (한줄 효과, 두줄 효과, 세줄 효과)

말줄임 효과를 통해 글씨를 안보이게 하거나 말줄임표를 표시하여 주는 효과입니다.

 

한 줄 효과

예시)

동해물과 백두산이 마르고...

/* CSS */

.ellipsis1 {
width:100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} 

---

두 줄 효과

예시)

동해물과 백두산이 마르고 닳도록

하나님이 보우하사 우리나라 만세...

/* CSS */

.ellipsis2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; 
-webkit-box-orient: vertical;
} 

---

세 줄 효과

예시)

동해물과 백두산이 마르고 닳도록

하나님이 보우하사 우리나라 만세

무궁화 삼천리 화려강산...

/* CSS */

.ellipsis3 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; 
-webkit-box-orient: vertical;
}