[CSS] 영역을 벗어난 글자를 말줄임표로 처리하는 법 : text-overflow

1. 적용 예시

제목을 클릭하여 게시글 본문으로 들어오면 제목을 끝까지 볼 수 있다. 이렇게 긴 제목을 위와 같이 생략 가능하다.

아직 CSS 설정이 덜 되어있는 모습이 신경쓰이지만 이정도는 참아주자.

2. 영역을 벗어난 글자를 말줄임표로 처리하는 법

1. 이론

아래와 같은 CSS 속성을 사용하여 문제를 해결할 수 있다.

white-space : 공백 처리 방법을 설정하는 속성. 공백 축소 여부 및 축소 방법, 줄바꿈 여부를 설정할 수 있다.

overflow: 영역을 벗어나는 컨텐츠의 처리 방법을 설정하는 속성.

text-overflow: 텍스트가 영역 밖을 벗어날 경우 해당 텍스트를 어떻게 처리할 것인지 설정하는 속성.

text-overflow의 사용 조건
1. 영역이 block 속성일 것.
2. width 또는 height가 고정적일 것.
3. white-space: nowrap;을 사용해 줄바꿈을 막을 것.
4. overflow: hidden을 사용해 영역을 벗어난 컨텐츠를 보이지 않게 숨길 것.

2. 사용 방법

width: 100%; // 내가 만들던 게시판의 경우, 해당 값을 100%로 설정하는 게 가장 적합했음. 
white-space: nowrap; // 줄바꿈 안 함
overflow: hidden; // 영역을 벗어난 부분을 보이지 않게 숨김처리
text-overflow: ellipsis; // 영역을 벗어난 부분을 말줄임표(...)로 처리

그대로 적었는데 안 됨.

우선 영역을 벗어난 글자가 글자 단위로 잘리는게 아니고 화면 째로 잘려나간 듯 글자 중간부터 잘려버림.

말줄임표가 나타나지 않음.

문제의 원인 => display 속성이 block이어야 한다는 조건을 만족하지 못함.

※ display 속성이 flex인 경우에도 제대로 동작하지 않으므로 이부분 반드시 확인해 주어야 함.

3. 내가 해결한 방법

display: block;	// 이부분이 flex로 설정되어있어서 제대로 동작하지 않았음
width: 100%;
white-space: nowrap; 
overflow: hidden;
text-overflow: ellipsis;

Record