태그 보관물: white-space

문자열이 길 경우 …(ellipsis) 처리하기

문자열이 길어서 넘칠 때 … 처리가 필요할 수 있는데, 굳이 자바스크립트를 사용하지 않고도 CSS에서 간단히 적용할 수 있습니다.

동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한 사람 대한으로 길이 보전하세

CSS 스타일에서 text-overflow 속성에 ellipsis를 입력하면 됩니다. 그러나 text-overflow만 적용하면 소용이 없고, 반듯이 white-spaceoverflow도 함께 적용해 주어야만 합니다.

.ed_applied{ text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한 사람 대한으로 길이 보전하세

즉, 한 줄로 표시하는 때에만 사용할 수 있으며, 두 줄 이상으로 표시되는 상황에는 적용할 수 없다는 얘기죠. 그럴땐 어쩔 수 없이 자바스크립트를 사용해서 처리해야 합니다.