css3 Text Overflow

2017-03-21

2024-06-07

css, css3

CSS 한줄 말줄임 처리하기

말 줄임 처리 방식은 크게 두 가지로 나뉠 수 있다.
첫째는 프론트엔드(스크립트)단이나 서버사이드(백엔드)단에서 글자수를 기준으로 자르는 방법이고, 둘째는 CSS를 이용해 정해진 너비 값을 기준으로 자르는 방법이다.
CSS를 이용한 방법은 구현 방법이 간단하고 성능에 영향을 주지 않아 글자수를 기준으로 자르는 방법보다 더 선호되고 있는 편이다.
구현 원리는 텍스트 문장이 고정된 width 폭 넓이보다 넓어지면 … 말줄임 표시가 되도록 처리가 되도록 하는 것이다.

CSS로 말줄임 효과 처리 하는 방법은 다음과 같다.

overflow:hidden;
text-overflow:ellipsis;
width:100px; /* max-width 속성 사용 가능 */
white-space:nowrap;
word-wrap:normal;

text-overflow

이 속성은 글자가 지정한 너비를 넘어갈경우 어떤식으로 처리할것인지를 선택하는 속성 이다.

clip: 기본값.
ellipsis: 말줄임표로 처리. 상위요소의 너비가 auto로 되어있는경우는 적용할 수 없음.
inherit: 상위요소의 속성과 동일하게 사용.

white-space

요소안에서 공백은 어떤식으로 처리할것인지를 선택하는 속성이다. 공백은 줄바꿈(line-break), 들여쓰기(tab), 공백(space) 이다.

normal: 기본값이며, 공백을 여러개 넣어도 공백을 1개로 처리한다.
nowrap: 공백을 여러개 넣어도 1개로 처리한다. 텍스트가 길어져도 강제적으로 줄바꿈을 하지않고 1줄로 표시한다.
pre: 공백이나 줄바꿈이 된 코드 그대로 표시한다. 코드에 줄바꿈이 없으면 줄바꿈을 실행하지 않는다.
pre-wrap: 공백을 코드에 있는 그대로 표시한다. 코드에 줄바꿈이 없어도 자동으로 줄바꿈을 실행한다.
pre-line: 공백을 여러개 넣어도 1개로 처리한다. 코드에 줄바꿈이 없어도 자동으로 줄바꿈을 실행한다. 코드에 줄바꿈이 있을때도 그대로 실행한다.

word-wrap

긴 텍스트를 강제로 끊어서 줄바꿈을 해주는 속성이다. (overflow 와 비슷)

normal: 기본값이며, 글자가 길어도 끊어지지 않고 한줄에 계속 표시한다.
break-word: 강제로 끊어서 줄바꿈 한다.

CSS 여러줄 멀티라인 말줄임 처리하기(두줄 이상일 경우)

웹킷엔진을 사용하는 브라우저에서 -webkit-line-clamp 속성을 사용하면 두줄이상 여러줄 말줄임 처리가 가능하다.

.ellipsis {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;    
    -webkit-line-clamp: 3; /* 라인수 */
    -webkit-box-orient: vertical;
    word-wrap:break-word; 
}

-webkit-line-clamp 속성의 경우, 웹킷 엔진을 사용하지 않는 브라우져의 경우 문제가 될수 있으므로,
line-height 속성과 height 속성을 이요하여 높이를 계산하여 넣어준다. (height = line-height * 줄수)

.ellipsis {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3; /* 라인수 */
    -webkit-box-orient: vertical;
    word-wrap:break-word; 
    line-height: 1.2em;
    height: 3.6em; /* line-height 가 1.2em 이고 3라인을 자르기 때문에 height는 1.2em * 3 = 3.6em */
}

FrontendCSS

css3 Text Overflow

CSS 한줄 말줄임 처리하기

CSS 여러줄 멀티라인 말줄임 처리하기(두줄 이상일 경우)

참조