CSS로 말줄임 효과내기

스크립트를 사용하지 않더라도 브라우저에서는 말 줄임을 css로 가능하게 지원해준다.

아래는 지원여부에 따라 테스트해본 결과이다.

<div class="selector">
test text.
test text.
test text.
test text.
test text.
test text.
test text.
</div>

.selector {
	width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

css의 네가지 규칙만 넣어주면, IE6~10, safari, firefox, chrome 모두 잘 나왔다. (만약 부모노드에서 width값과 overflow: hidden이 걸려있으면 텍스트를 담은 태그에서는 생략해도 관계없다.)

그러면 2줄 이상일때 말줄임도 가능할까? html은 위와 같고 css만 다르게 변경하여 테스트 해보았다.

.selector {
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	display: -webkit-box;
	overflow: hidden;
	width: 150px;
	text-overflow: ellipsis;
}

이상하게도 webkit 계열(chrome, safari)을 제외한 나머지 브라우저에서는 안된다.

이런저런 방법을 해보았지만, 안된다. 크로스 브라우징을 생각한다면 가장 확실한

방법은 역시 스크립트 정답인듯 싶다.

돌아다니는중에 이 문제에 관련해서,

참고할만한 포스트와 플러그인 링크를 걸어두었다.

• 멀티라인 트릭관련 글
• css만으로 말줄임 효과내기 관련글
• Clamp 플러그인
• dotdotdot 플러그인

출처 : http://blim.co.kr/archives/22