1. 한 줄 말줄임 처리
1 2 3 4 5 6 7 | .dot { display: inline-block; width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } | cs |
white-space: nowrap; 으로 문장이 정해진 공간을 넘어가더라도 줄바꿈되지 않게 처리한다.
그리고 overflow: hidden; 으로 넘치는 부분을 숨긴 뒤,
넘친 부분에 해당하는 text-overflow를 ellipsis로 함으로써, 말줄임표로 대체한다.
2. 여러 줄 말줄임 처리
1 2 3 4 5 6 7 8 9 10 11 | .dot { display: inline-block; width: 300px; text-overflow: ellipsis; line-height: 1.2; height: 3.6em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } | cs |
white-space 속성은 여러 줄인 경우에는 필요가 없다.
line-height로 한 줄의 높이를 설정하고, height로 최대 높이를 설정한 뒤,
webkit-box로 바꾸고 line-clamp로 최대 줄 수를 정해준다.
box-orient로 박스의 방향은 수직으로 한다.