css에서 말줄임('...') text-overflow: ellipsis; 로 처리하기

contetns 길이가 길어졌을때, 

css에서 말줄임 ('...')을 통해 생략할 수 있습니다.

text-overflow: ellipsis; 속성을 쓰면

편하게 처리할 수 있습니다.

 

javascript를 쓰지 않고도 충분히 css만으로도

처리가 가능합니다.

주로 '게시판'의 텍스트 제한이 

넘어갔을 때 사용하는 것 같습니다.

 

oseid-the-styleful) on CodePen.

 

말줄임('...') css 속성

text-overflow: ellipsis;)

1줄 라인일때

 

1. ellipsis는 block 일때만 적용

 

2. overflow: hidden;

width를 10% 주었으므로,

이 넓이 이상 넘어가면 자동으로 

텍스트가 생략됩니다.

 

3. text-overflow: ellipsis;

width 10%가 넘어가는 순간부터

'생략부호'를 표기해줍니다.

 

4. white-space: nowrap;

공백이 여러 개 일때도 '1개의 공백'으로 처리해준다.

가로로 긴 줄일 때, 줄 바꿈 하지 않는다.

 

 

반응형

white-space: nowrap;

tab은 보통 space를 4번 누른 것과 같은 효과를 냅니다.

 

연속된 공백을 그대로 표기한다는 말은

space를 여러번 눌러도,

tab을 적용해도 그대로 입력된다는 뜻입니다.

 

반면 normal,nowrap,pre-line 같은 것들은

아무리 여러 번 눌러도

단 1개의 공백으로 표기됩니다.

 

mdn

tab으로 들여쓰기를 해도,

위와 같이 표기되고 

박스를 벗어난 모습이 보입니다.

들여쓰기가 될 때와 

(space를 여러 번 쓰거나, tab 쓰기)

그렇지 않을 때의 차이가 나게 됩니다.

저는 nowrap을 써주었으니,

space나 tab을 아무리 써도 

공백은 1개로만 인식됩니다.

 

*

이상 css에서 말줄임('...') 처리해주는 방법을 알아봤습니다.

 text-overflow: ellipsis; 이 속성만

쓰이면 안 먹힐 수 있구요.

 

꼭 block인지 확인해보시고

추가적인 2가지 코드도 작성해보시기 바랍니다.

 

1줄 짜리 문장이 아니라 멀티라인일때도

적용이 가능한데요.

추후에 적용해볼 일이 생기면 

포스팅해보겠습니다.