[CSS] 텍스트 2줄 이상 시 말줄임('...') 처리하기

 

 

2줄 이상 시 말 줄임처리하기

 

 

있어야 할 것 같지만 없어도 되는 속성은 'width'이다.

'max-height' 속성의 경우 font-size의 2배나, line-height값이 있다면 해당 값의 2배로 주면 된다.

'-webkit-line-clamp' 속성이 줄의 수로, 나는 2줄부터 말줄임이 필요했기때문에 값을 2로 적어주었다.

.hidden-text-target {
  font-size: 15px;
  max-height: 40px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

 

 

이 2개의 값은 넣어봤지만 변화가 없어서 추가하지 않았다.

추후 문제가 생기면 추가하기!

white-space: normal;
text-overflow: ellipsis;

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.