[CSS] 멀티라인, ellipsis 두줄 이상에 줄임표시, 생략표시 적용 방법

텍스트가 일정 길이 이상 길어지는 경우 생략 기호를 사용하여 표시하면 매우 효과적입니다. 길이가 더 길다는 것을 시각적으로 표시할 수 있고 공간 안에서 레이아웃을 효과적으로 꾸밀 수 있죠. 일반적으로 한줄인 경우에만 생략 기호를 사용하나 만약 폭(width)이 너무 좁아 두 줄 이상의 텍스트를 생략 기호를 사용해 보여주려면 가능할까요??


이런 물음은 크롬의 경우 텍스트가 두 줄인 경우에도 적용되기 때문입니다. 하지만 항상 그렇듯 다른 브라우저에서는 정상 적용되지 않는데 이런 경우 해결 방법은 무엇이 있을까요??

일단 IE에서 두 줄 이상의 멀티 라인에는 적용되지 않았습니다. 구글링을 해보았으나 정상적인 방법으로 해결할 수는 없다는 결론입니다. 그리하여 이런 경우 선택 할 수 있는 방법음 아래와 같이 세가지 입니다.


1. 각각의 라인마다 모두 생략 표시로 나타날수 있도록 개별 단어마다 css 적용

2. 생략 표시를 사용하지 않고 보이지 않게만 수정

3. 어쩔 수 없이 한줄로 나타내고 생략 표시 적용


아쉽게도 현재로서 완벽한 해결 방법은 없는 것 같습니다.

 

[출처] http://webisfree.com/blog/?titlequery=%EB%A9%80%ED%8B%B0%EB%9D%BC%EC%9D%B8--css-ellipsis-%EB%91%90%EC%A4%84-%EC%9D%B4%EC%83%81%EC%97%90-%EC%A4%84%EC%9E%84%ED%91%9C%EC%8B%9C--%EC%83%9D%EB%9E%B5%ED%91%9C%EC%8B%9C-%EC%A0%81%EC%9A%A9-%EB%B0%A9%EB%B2%95