[CSS] css 말줄임(text-overflow: ellipsis)이 적용이 안될 때

아래 같이 화면 줄어듦에 따라 넘치는 텍스트는 ... 으로 처리하고 싶은데

text-overflow: ellipsis 적용이 안될 때의 해결 방법 정리에 관한 글이다.

적용에 앞서, 먼저 체크해봐야 할 부분이 있다. 

1. width가 제대로 설정되어 있는지

2. block태그이거나, 혹은 display: block/ inline-block 처리가 되어 있는지(flex는 적용 안됨)

3. 글자가 width를 넘어가는 조건을 충족시켰는지

 

위 조건들을 모두 만족하는데도 text-overflow: ellipsis 속성 적용이 안된다면

숨기려는 텍스트 요소에 아래 부가적인 속성들을 더 추가해서 해결할 수 있다.

p {
    padding: 4px 0 5px;
    letter-spacing: -1.5px;
    font-family: var(--shoopen-font-prodtxt);
    // 텍스트 말줄임표
    text-overflow: ellipsis;
    white-space: nowrap; // 추가
    overflow: hidden; // 추가
}

 

대략 적용이 되는 흐름은 이렇다.

white-space로 한 줄로 모아준 뒤에

overflow: hidden 처리로 넘어가는 텍스트는 숨김 처리한 후,

text-overflow: ellipsis 로 넘어간 텍스트는 ... 처리시킨다.

 

이렇게 하면

아래처럼 텍스트 말줄임 설정이 잘 적용된다!