CSS 생략기호 만들기(한줄, 멀티)

박스 형태나 한정된 width 값을 가지고 있을 때 CSS로 생략 기호를 만들 수 있습니다. 

 

css 생략기호 만들기

 

See the Pen css 생략기호 1줄 / 멀티 by Cho-YoungHo (@choyoungho-web) on CodePen.

 

 

CSS에서는 한줄과 멀티의 형태로 생략기호를 만들 수 있습니다. 공통적인 코드는 다음과 같습니다.

 

width:300px;
overflow: hidden;
text-overflow: ellipsis;

 

overflow 속성은 width 값과 height 값을 넘어간 글자에 대해서 숨기거나 스크롤이 생기게 할 수 있습니다.

text-overflow 속성은 overflow된 내용을 사용자에게 어떻게 전달할지 지정합니다. 기본값은 clip으로 잘린 채 아무 것도 없습니다. 반면 ellipsis는 생략기호(...)을 표시합니다. 또는 string으로 사용자 정의로 만들 수 있습니다.

 

여기서 한줄로 표시하거나 2줄 이상의 멀티라인에 대해서 생략기호를 만들 수 있습니다.

 

한줄

 

white-space: nowrap;

 

white-space는 공백 처리 방법을 지정합니다. normal, nowrap, pre, pre-line, pre-wrap가 있습니다. 이 중 nowrap는 한줄로 표시되는 속성값입니다.

 

 

 

 

멀티

 

display:-webkit-box;
height:40px;
white-space: normal;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

 

멀티라인은 height 값을 주고 white-space를 기본값으로 설정하고 특정 줄 수에서 텍스트를 자르는 line-clamp를 설정해야 합니다. 이떄 height 값은 줄 수에 맞춰서 설정해야 멀티라인이 형성되게 됩니다.

 

box-orient는 박스의 흐름순서를 지정하는 속성으로 vertical은 위에서 아래로 horizontal은 오른쪽에서 왼쪽으로 쌓이게 됩니다.