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)을 제외한 나머지 브라우저에서는 안된다.

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

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


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

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



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

'Computer > CSS' 카테고리의 다른 글

CSS로 말줄임 효과내기  (0) 2015.02.26
IE10에서 네이버 스마트 에디터 자바스크립트 오류  (2) 2013.05.13
자동 개행  (0) 2012.08.10
CSS Hack  (0) 2012.08.10
디자인 템플릿  (0) 2012.08.10
[HTML] CSS3 를 이용한 툴팁(Tooltip) 표시  (0) 2012.01.19
TAGS. ,

Comments 0