게시판 리스트 박스, 혹은 후기 박스를 만들면서 말 줄임표를 쓰거나 더보기 기능을
구현해야 하는 경우가 잦았다.
자주 구글링하게 되어 그 CSS 속성에 대해 정리해본다.
.reviewBoxTtl {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-break: break-all;
}overflow 속성은 hidden으로 준다.
지금은 부모의 width값이 inherit되어 보이지 않지만 당연히 줄이고자 하는 div에
width property를 줘야 원하는 만큼 글을 줄이고 말 줄임표가 나오게 된다.
ellipsis 속성은 가장 간단하게 긴 글을 줄일 수 있는 방법이지만 1줄로 줄이는 것밖에는 되지 않는다.
여러줄로 줄이기 위해 다음과 같이 적용해보았다.
.reviewBoxTtl {
max-height: 120px;
overflow: hidden;
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 4; // 글의 최대 라인수를 결정
-webkit-box-orient: vertical;
word-break: break-all;
}white-space는 normal로 준다.
여기서 -webkit-line-clamp는 글의 최대 행 숫자이다.
4로 설정하면 4줄까지만 나오고 말줄임표로 마무리 된다.
-webkit은 크로스브라우징을 위해 필요한데,
-webkit은 구글, 사파리 브라우저에서 사용 가능하다
적용할 때 브라우저 지원 범위를 확인하고 사용하기!
마치면서
text-overflow 속성은 display 속성이 블럭 형태인 경우에만 적용된다.
즉, inline의 경우는 적용되지 않음.
이를 적용하기 위해서는 반드시 아래와 같이 display를 block 또는 inline-block과 같이 설정해야만 적상적으로 작동한다는 것을 명심하자
구글링 그만하고 외워버리자..
💻 Hello world