한 줄 말줄임표
.line {
white-space: nowrap; /* 텍스트가 줄바꿈 되지 않도록 함 */
overflow: hidden; /* 초과된 텍스트를 감추기 위해 오버플로우를 숨김 */
text-overflow: ellipsis; /* 말줄임표 표시 */
}두 줄(여러줄) 말줄임표
.line2 {
display: -webkit-box;
-webkit-box-orient: vertical; /* 수직정렬 */
-webkit-line-clamp: 2; /* 두 줄로 제한 */
overflow: hidden;
text-overflow: ellipsis;
}주의사항
한 줄 말줄임표는 왼만한 브라우저에서 모두 지원하고 있는 속성들을 사용합니다.
다만 두 줄 이상의 말줄임표에서는 조금 복잡합니다.
prefix로만 지원되고 있는 -webkit-box, -webkit-box-orient, -webkit-line-clamp는 모든 브라우저에 대한 호환성을 보장하고 있지 않기 때문입니다. 그래서 호환성을 위해 flex속성을 주고 기본 정렬을 넣어 주는것이 일반적인 것 같습니다.
말줄임표의 원리는 기본적으로 요소의 영역을 넘어간 것을 안보이게 overflow를 hidden으로 걸어주고 text-overflow 속성으로 말줄임표를 넣어주는 원리입니다. 마크업에 있는 실제 텍스트가 정말로 가공되는 것이 아니기 때문에 padding같은 영역을 확장하는 속성이 있으면 글자가 보여버리니 주의해야 겠습니다.
