CSS로 텍스트 라인 수 조절하기
한 줄로 제한하기 (white-space)
가장 흔하게 사용되는 한 줄로 조절하는 방법입니다.
위 예시는 영역을 넘어가는 부분을 표시하지않고 끝에 …을 추가합니다.
적용방법
CSS의 3가지 속성을 사용해서 표현합니다.
1
2
3
white-space: no-wrap,
overflow: hidden,
text-overflow: ellipsis
white-space: no-wrap
전체 문단을 한 줄로 표현해줍니다.
overflow: hidden
영역 밖의 텍스트를 숨겨줍니다.
text-overflow: ellipsis
영역 밖에 텍스트가 있다면 …을 추가해 표시합니다.
white-space
CSS에서 white-space 속성은 요소가 공백 문자를 처리하는 법을 지정합니다.
normal
기본값으로 사용되며 연속된 띄어쓰기(\s), 들여쓰기(\t) 그리고 줄바꿈 문자(\n)가 모두 무시가 됩니다.
no-wrap
normal과 동일하지만 자동 줄바꿈이 일어나지 않습니다.
<br>로 줄바꿈이 가능합니다.pre
연속된 띄어쓰기와 들여쓰기, 줄바꿈이 있는 그대로 유지됩니다.
pre-wrap
연속된 띄어쓰기와 들여쓰기, 줄바꿈을 있는 그대로 보존하며 자동 줄바꿈이 일어납니다.
overflow
요소의 콘텐츠가 너무 커서 요소의 블록 서식 맥락에 맞출 수 없을 때의 처리법을 지정합니다.
visible
기본값으로 사용되며 컨텐츠를 밖으로 밀어내는 한이 있더라도 끝까지 보여줍니다.
hidden
콘텐츠를 안쪽 여백 상자에 맞추기 위해 잘라냅니다.
스크롤바를 제공하지 않고, 스크롤할 방법(드래그, 마우스 휠 등)도 지원하지 않습니다.
scroll
콘텐츠를 안쪽 여백 상자에 맞추기 위해 잘라냅니다.
항상 스크롤바를 노출합니다.
auto
컨텐츠의 크기가 주어진 공간을 넘어가는 경우에만 스크롤바가 생깁니다.
여러 줄 제한하기 (webkit-line-clamp)
텍스트 라인 수를 여러 줄로 제한하고 싶은 경우 사용됩니다.
적용 방법
display 속성을
-webkit-box또는-webkit-inline-box로 지정합니다.-webkit-box-orient 속성을
vertical로 지정합니다.-webkit-line-clamp 속성에 제한할 행 수를 입력하면 문자열이 제한됩니다.
overflow 속성을
hidden으로 지정해 뒤에 문자열을 지워줍니다.
1
2
3
4
display: -webkit-box (또는 -webkit-inline-box),
-webkit-box-orient: vertical,
-webkit-line-clamp: 3 (integer),
overflow: hidden;
padding 추가하기
-webkit-line-clamp를 설정한 후 padding을 주겠습니다.
이 때, 만약 overflow 속성을 hidden으로 설정했다면 padding 영역에 지워졌던 콘텐츠가 나타납니다.
이를 위해 wrapper로 감싼 후 wrapper에 padding을 주어 해결할 수 있습니다.