[CSS] 말줄임 처리(...) / word-wrap / word-break / white-space

한줄 말줄임 처리(글자수 제한) (block 요소에서만 적용)

<style>
    .txt1 {
        width:200px;
        overflow:hidden;            /* 넓이 200px을 넘는 내용에 대해서는 보이지않게 처리 */

        text-overflow:ellipsis;      /* 글자가 넓이 200px를 넘을 경우 생략부호(...) 표시 */

        white-space:nowrap;      /* 공백문자가 있는 경우 줄바꿈하지 않고 한줄로 나오게 처리 (\A로 줄바꿈 가능) */

        background:#999; color:#fff;

}

</style>

<div class="txt1">디오 Rainbow in the Dark. 번개가 있을때마다 너는 그것이 나를 언제나 좌절시킨다는걸 알잖아.</div>

- 결과 : 

멀티라인 말줄임 제한(글자수 제한)

<style>

    .txt2 {
        width:480px; vertical-align:top;

display: -ms-flexbox; display: -webkit-box; display: -moz-box; display: box;
max-height:80px;
        overflow:hidden;
        text-overflow: ellipsis;                /* 글자가 넘치면 생략부호(...) 표시 */
        word-break:break-all;                /* 글자 단위로 "강제" 줄바꿈 처리 */
        -webkit-box-orient:vertical;
        -webkit-line-clamp:3;

line-height:1.3em; height:3.9em;   /* height:1.3em x 3배 */
background:#999; color:#fff;
    }
</style>

<div class="txt2">

디오 Rainbow in the Dark.<br/>

번개가 있을때마다 너는 그것이 나를 언제나 좌절시킨다는걸 알잖아.<br/>

왜냐하면 그것은 자유롭고 나는 그걸 알고있어.<br/>

떠나버려서 영영 찾을수 없는 사람말이야.<br/>

나는 마법을 갈망해, 그 기운이 빛 아래에서 춤추는게 느껴져.<br/>

그것은 차가웠고, 나는 놓쳐버리고 말았어

</div>

- 결과(크롬) :

- 한계 및 해결법 :
  웹킷 엔진을 사용하는 브라우저에서만 display: -webkit-box; 속성과 -webkit-line-clamp 프로퍼티를 활용하여 여러줄의 문단을 말줄임 처리를 할 수 있음.

  웹킷 엔진을 사용하지 않는 브라우저에서는 해당 코드가 무시되므로 적절한 처리가 필요.

  단순히 height 값을 넣어서 영역을 벗어난 글자를 잘라낼 경우 아래와 같은 문제가 발생.
   

 사진 출처 : Toby Yun | CSS를 통한 멀티라인 말줄임 처리와 폴백

-webkit-line-clamp 값이 지정되어있어도 그보다 큰 height값이 요소에 지정되어있다면 나머지 텍스트도 노출되어버리는 문제가 발생
이를 방지하기 위해 height 값을 적절히 줄여 사용할 수도 있지만 모바일 환경에서는 단말기에 따라 폰트도 달라지기 때문에 폰트의 크기를 확신할 수 없음.
결국 어느 단말기에서는 잘려보일 수 있는 위험이 존재.
이를 방지하기 위해서는 line-height 값을 설정 + 그에 비례하는 height 값을 설정하여 해결.
예를들어,
line-height: 14px; -webkit-line-clamp: 3; 이면 height 값은 14px와 3을 곱한 42px 값을 주어야함

line-height: 1.2em; -webkit-line-clamp: 2; 라면 height 값은 1.2em과 2를 곱한 2.4em을 주면됨
- 한계 및 해결법의 출처 : Toby Yun | CSS를 통한 멀티라인 말줄임 처리와 폴백

Tips

display: box; 특정 영역 안의 여러 박스들을 수평정렬 혹은 수직 정렬 해주는 속성. 역순 배열하거나 임의로 순서를 변경할 수도 있음. float 혹은 table 혹은 table-cell과 비슷.

display:box;

-webkit-box-orient:vertical/horizontal; -moz-box-orient:vertical/horizontal;         /* vertical 혹은 horizontal */

box-pack: start/center/end/justify;                         /* 좌측정렬, 중앙정렬, 우측정렬, 양쪽배분정렬 */

-webkit-box-direction: reverse; -moz-box-direction: reverse; box-direction: reverse/normal; /* 방향 : reverse 혹은 normal */

* 출처 및 자세한 정보 : 날라리기획자와 키다리디자이너 | CSS3 - display:box 에 대해 공부해 보자.

word-wrap: normal / break-word;
 - 긴 텍스트를 강제를 끊어 줄바꿈을 해주는 속성
 - word-wrap 속성은 비아시아 언어의 줄바꿈을 제어, 아시아언어(CJK)의 줄바꿈은 word-break 속성을 참조
 - normal: 기본값. 글자가 길어도 끊어지지않고 한 줄에 계속 표시
 - break-word: 강제 줄바꿈 처리
 - word-wrap이 가능한 요소 : height 나 width를 지닌 인라인 요소, 블록요소이거나, 절대적 위치의(absolutely positioned) 블록 요소
 * 출처 및 자세한 정보 : 지구별 안내서 | word-wrap 줄바꿈 속성(normal, break-word)

word-break: normal / break-all / keep-all / initial / inherit;

 - 줄바꿈을 어떻게 할 것인지에 대한 옵션
 - 아시아를 위해 만들어진 속성(영문의 경우 자동으로 하나의 연결된 단어는 함께 묶어서 줄바꿈이 되지만 한글 이외의 2byte 이상의 문자들은 그렇지 않죠)으로
   영문과 달리 byte단위로 구분되지 않는 언어의 랩핑을 돕습니다. 즉 영문이 아닌 단어의 줄바꿈을 원할 경우 사용하면 좋음.
    * 위설명 출처 : WebIsFree | [CSS] Linebreak 줄바꿈 처리하기, Word-Wrap, Word-Break, White-Space
 - word-wrap은 비아시아 언어의 줄바꿈을 제어한다면 word-break는 아시아, 비아시아 언어의 줄바꿈을 모두 제어할 수 있음.
    * 위설명 출처 : 지구별 안내서 | word-break 줄바꿈 속성(break-all, keep-all)

 - break-all : 글자 기준으로 "강제" 줄바꿈. 즉 단어 무시

 - keep-all : 단어 기준으로 줄바꿈

 * 출처 및 자세한 정보 : CMS FACTORY > CSS 강좌 | Property > word-break

# white-space : normal / nowrap / pre / pre-wrap / pre-line / inherit;

 - 요소내 공백 처리 방법 & 줄바꿈 처리 방법

 - normal : 기본값, 공백을 여러개 넣어도 공백 1개만 표시, 글이 요소의 넓이 초과시 자동 줄바꿈 됨(wrap)

 - nowrap : 공백을 여러개 넣어도 1개만 표시, 텍스트가 길어도 줄바꿈 되지 않음

 - pre : <pre>태그와 동일 기능. 공백을 코드에 있는 그대로 표시함. 줄바꿈이 코드와 동일하게 유지

 - pre-wrap : 공백을 코드에 있는 그대로 표시함. 코드에 줄바꿈이 없어도 자동 줄바꿈이 됨.

 - pre-line : 공백을 여러개 넣어도 1개만 표시. 코드에 줄바꿈이 없어도 자동 줄바꿈이 되며, 코드에 줄바꿈이 있을 때도 그대로 표시
 - inherit : 부모요소로 부터 상속

 * 출처 : 지구별 안내서 | white-space 속성(pre, pre-wrap, pre-line 차이)