[CSS] text ellipsis 한 줄, 여러 줄 말줄임표 한글 줄바꿈 word break

프론트엔드 작업할때 종종 쓰는 줄바꿈. 보통은 통일된 디자인을 위해 한줄 줄바꿈을 많이 쓰지만 가끔 여러줄 줄바꿈을 쓰는 경우도 있다. 그럴때 복붙해서 사용하려고 나를 위해 정리하는 글...ㅋㅋㅋㅋㅋㅋㅋ

한 줄 줄바꿈

.text-ellipsis{
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

 

여러 줄 줄바꿈

/* 3줄 줄바꿈 */
.text-ellipsis--3{
  text-overflow:ellipsis;
  overflow:hidden;
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: normal;
}

예시는 요즘 빠져서 무한반복하고 있는 <술 한잔 해요>가사ㅋㅋㅋㅋㅋ

 

See the Pen text-ellipsis by sophie-jhkim (@sophie-jhkim) on CodePen.

 

 

 

 

 

한글 어절단위 줄바꿈

여기에 추가로 한글의 경우 줄바꿈이 기본으로 음절단위(한 글자씩)로 되는데 디자인상 어절단위(띄어쓰기 단위)로 변경하고 싶을경우 word-break에 keep-all 설정을 추가해준다. 

이 두개의 차이를 쉽게 구분하자면 한글이나 워드같은 문서 프로그램이나 에디터에서 흔히 볼 수 있는 문장정렬 기호를 떠올리면 쉽다. (자간이 벌어지기때문에 정확히 같은 개념이라고 할수는 없지만...)

보통 영어의 경우 기본적으로 띄어쓰기 단위로 줄바꿈이 되는데 이를 양쪽정렬(알파벳단위 줄바꿈)으로 설정하려면 break-all을 쓴다. 하지만 한국어는 반대로 기본이 양쪽정렬(어절단위)으로 줄바꿈이 되기때문에 이를 띄어쓰기 단위로 줄바꿈 하려면 keep-all 설정을 적용해야 한다.

 

이 글은 말줄임표를 정리하는 내용이니 word-break에 관한 더 자세한 내용은 mdn을 찾아보면 좋겠다. 

word-break - CSS: Cascading Style Sheets | MDN

 

 

+ 추가

띄어쓰기 없는 긴 문장을 데이터로 받을 경우와 특수문자를 포함할 경우

보통 짧은 글을 위주로, 한글을 사용하는 웹사이트를 만들때는 띄어쓰기가 다 되어있다고 생각하기때문에 본 글에 쓴 것처럼 keep-all으로도 어느정도 커버가 가능하다. 하지만 긴문장이 띄어쓰기없이 붙어있을 경우 keep-all으로 설정되어있다면 한글은 줄바꿈을 하지않고 컨텐츠 영역밖으로 넘어가버린다!

 

위의 mdn문서에 따르면 break-word를 사용해도 좋을 것 같지만 해당 옵션은 현재 더이상 사용되지않음(deprecated)딱지가 붙어있다. 현재는 이 값이 default와 같다고 하니 아예 아무 설정을 하지 않거나 word-break:normal으로 설정하는 것이 좋겠다.

그러나! normal의 경우의 문제는 띄어쓰기가 없는 영문과 특수문자의 경우 줄바꿈을 하지 않는다는 것!

 

이걸 어떻게 알게됐냐면...

요즘 프로젝트에서 법률관련 데이터를 다루고 있는데 이게 방대한 컨텐츠에 보통은 PC버전(원래는 한글 같은 문서로 제공되니...)을 기준으로 데이터를 받는데 그러다보니 띄어쓰기가 제대로 안되어있는 경우도 있고 가장 중요한건 표랍시고 특수문자를 와라라라라 들어가있어서 줄바꿈이 제대로 되지 않는다는 것이다! 

(예를 들면 ┌━━━┬━━━┐이런식으로 특수문자로 만든 간이표가 그냥 string데이터로 넘어옴)

 

그러니 화면에 보여질 데이터가 불분명하다면(한글인지, 영어인지, 띄어쓰기가 있는지 없는지, 특수문자가 있는지 없는지 정확하지 않다면) 그냥 마음편하게 break-all을 쓰는게 낫겠다.

 

 

+추가 overflow-wrap

 break-all의 경우에도 2byte의 문자일 경우에만 줄바꿈이 적용되고 물음표(?)와 같은 1byte 특수문자일때는 줄바꿈이 적용되지 않는다. 예를 들면 위에서 언급한 표를 만드는 특수문자들 ┌ 같은 얘들은 2byte의 크기로 break-all이 먹히지만 ?,!,\ 이런 특수문자의 경우 1byte라 연속적으로 길게 입력할 경우 컨텐츠 영역을 벗어난다. 이럴때 추가할 수 있는 스타일이 바로 overflow-wrap

overflow-wrap : break-word

overflow-wrap : break-word 스타일을 추가하면 1byte크기의 특수문자까지도 컨텐츠 영역안에서 자동으로 줄바꿈 된다. 만약 제대로 안먹힌다면 컨텐츠가 블록요소가 맞는지 width 값이 제대로 설정되어있는지 확인해보자

 

 

 

참고: 

https://smartstudio.tech/deepdive-linebreak-css-about-language/