[CSS] IE(익스플로러)에서 말줄임 또는 -webkit-line-clamp 이슈

white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis;

IE(익스플로러)에서 말줄임 또는 -webkit-line-clamp 이슈

일반적으로 말줄임은 위와 같은 속성을 사용한다. 영어 그대로 white-space(공백)은 공백 처리를 어떻게 처리하면 좋을지 적용해주는 속성이고, overflow는 글이 요소 밖으로 넘칠 경우 가려주는 속성이다. 그리고 text-overflow는 텍스트가 요소 밖으로 넘쳤을 때 ellipsis(생략 부호)로 줄여주는 속성이다.

-webkit- 속성은 IE에서 사용하지 못한다. 크롬, 사파리 등에서만 적용이 된다나, 그래서 위의 속성을 IE에서 적용할 수 없다면 다른 방법을 찾아봤다. 바로 IE 주석처리 방법이다.

결과적으로 말하면, 생략 부호는 적용할 수 없었고 텍스트 부분의 높이값만 적용하여 잘리도록 했다. 주석처리 방법을 통해서 IE에서만 원하는 속성을 적용시키고자 했지만, IE 11(익스플로러 최신 버전)에서는 주석 기능을 지원하지 않아서 어떤 수를 쓰더라도 IE에서만 스타일을 적용할 수 없었다. 다른 방법들 중에서 JavaScript나 JQuery 방법이 있다고 하지만, 다소 복잡할 것 같아서 이 부분을 간단하게 적용시키고 마감하기로 했다.

-webkit-line-clamp

두 줄 이상으로 글이 길어질 경우 말줄임 처리를 할 수 있다. 웹킷 브라우저에서 사용이 가능하다. 동시에 -webkit-box-orient: vertical; 속성을 적용하여 말줄임 방향을 정해줘야 한다. 글의 가독성을 높이기 위해 단어 단위로 말줄임을 해주는 word-wrap: break-word; 속성까지 적용하면 완벽하다.

웹킷 속성 말고 웹표준으로 선언된 line-clamp도 같은 속성으로 적용해주면 훨씬 호환성이 좋다.