글 목록에서 제목이나 내용이 필요 이상으로 길어질 경우, 화면에 알맞게 보여지기 위해 내용의 일부만 보여주고 말 줄임 표시(…)를 해야 한다.
제목과 요약을 출력하고 있는 페이지가 많았기 때문에 이를 적용하기로 했다.
CSS를 이용하여 간단하게 처리할 수 있다.
text-overflow
글자가 지정한 너비를 넘어 갈 경우 어떤 식으로 처리할 것인지 선택하는 속성
clip : 기본값
ellipsis : 말줄임표로 처리, 상위요소의 너비가 auto로 되어 있는 경우 적용 불가
inherit : 상위요소의 속성과 동일하게 사용
word-wrap
긴 텍스트를 강제로 끊어서 줄바꿈을 해주는 속성
normal : 기본값, 글자가 길어도 끊어지지 않고 한줄에 표시
break-word : 강제로 끊어서 줄바꿈
-webkit-line-clamp
보여질 줄 수를 숫자로 입력
ex) 3줄 보여주고 나머지 내용 말줄임으로 표시 :-webkit-line-clamp: 3;
display: -webkit-box, -webkit-box-orient: vertical와 함께 설정
디벨로픽의 글 목록에선 제목은 2출 처리, 요약은 3줄 처리 해주었다.
h3 {
display: -webkit-box;
-webkit-box-orient: vertical;
word-wrap: break-word;
text-overflow: ellipsis;
/* 글자가 지정한 너비를 넘어갈 경우 어떤식으로 처리할 것인지 선택하는 속성
ellipsis : 말줄임표로 처리한다. 상위요소의 너비가 auto로 되어있는 경우 적용 X */
overflow: hidden;
-webkit-line-clamp: 2; /* 보여질 줄 수 */
}
p {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}References
