multiline truncation with pure CSS :: css만으로 말줄임표를 해보자

via GIPHY

 

 

 

말줄임표를 쓰고 싶은 곳에 아래 스타일을 추가해주세요.

.single-line{  
    display: block;
    display: -webkit-box;
    position:relative;
    overflow: hidden;
    width: 100%;
    height: 28px;
    font-size: 18px;
    line-height: 26px;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

바쁘신 분들을 위해 css를 선사합니다.

클래스 추가해주시면 원하는 결과가 나올 겁니다!

 

 

 

line-clamp 값에 원하는 숫자를 쓰면 숫자만큼 잘립니다.

-webkit-line-clamp: 2 (2줄까지)

-webkit-line-clamp: 3 (3줄까지)

 

줄수를 설정할 떄 행간(line-height)를 같이 조정해주시면 보기 좋습니다.

 

 

 

See the Pen ellipsis by sonia (@sophyspick) on CodePen.

 

•  line-clamp 속성으로 라인 수를 자를 수 있음
• can i use 사이트를 참고하면 IE에서는 해당 말줄임표(...) 사용 불가. 원하는 라인까지만 자르는 걸로 대체