css로 텍스트 ... 처리하기 - 고정, 가변 길이 element

div 나 span의 길이가 유동적으로 변하는 반응형 웹에서 텍스트의 길이가 element를 넘어가서 줄이 바뀌는 경우가 있다.

이럴때 css를 사용하여 텍스트를 자동으로 자르고 넘어간 텍스트를 ...으로 처리하는 방법에 대해 알아보자.

구글링을 하면 많은 자료들이 등장한다.

대부분 고정된 element에서 text를 처리하는 방법이다.

하지만 내가 원하는것은 element의 width가 %로 설정되어있어 브라우저 창을 변경했을때

width의 길이도 변하는것이다.

검색한 방법은 width가 px값으로 고정되어있는 상태에서 처리하는 방법이었다.

해당 방법이 필요한 사람들도 있으니 먼저 소개하겠다.

1. 고정된 width의 element에서 css로 text 처리방법

해당 text를 감싸고있는 element에 css를 다음과 같이 추가한다.

width : 100px; (px을 고정 값으로 설정한다. 이는 자신이 원하는 만큼 설정하면 될것이다.)

white-space : nowrap; (text의 길이가 길어지면 자동으로 줄이 바뀌는데 이를 한줄로 설정한다.)

overflow : hidden; (width가 고정되어있는 상태에서 text가 길어지면 해당 element를 넘어서는데 이를 표시하지 않는다.)

text-overflow : ellipsis; (넘어간 text대신 ...으로 text를 대체한다.)

* 만약 줄이 여러개인 경우에 처리하는 방법은 구글링에 검색하기 바란다.

* 그래도 모르겠다면 댓글로 질문을해라. 답변해주겠다.

2. 유동적인 width (%값)의 element에서 css로 text 처리방법

유동적인 width인 element에서 위의 방법을 설정하려고하니 width가 %로 설정되어있어 해당 방법이 통하지 않는다.

이럴때는 height를 고정값으로 설정하여 위 방법을 적용시킬 수 있다.

위와 같이 1줄의 경우만 설명한다.

css를 다음과 같이 추가해보자.

overflow : hidden;

text-overflow : ellipsis; (width를 설정하지 않고 여기까진 위와 동일하다.)

height : 20px; (대신 height를 설정해준다. 텍스트 크기에 맞춰 height가 1줄인 경우를 생각하자.)

word-wrap : brek-word; 

display : -webkit-box;

-webkit-line-clamp : 1; (줄 개수를 설정한다. 만약 2줄이상이라면 height와 해당 값을 수정한다.)

-webkit-box-orient: vertical; 

위와 같이 설정했다면 유동적인 width의 element에서도 text가 넘어설때 자동으로 ...처리가 되는것을 확인할 수 있다.

오타나 질문 사항은 댓글로 남겨주기 바란다.

그럼 수고링