말줄임(ellipsis) 두줄이상에 적용하는 방법

css 를 이용해서 ellipsis 두줄이상에 적용하는 방법입니다. 블로그 적용하기 위해 찾아보고 기록을 위해서 글을 남깁니다.

ellipsis 기능에 대한 상세한 설명은 아래 사이트 참고하면 됩니다.

https://www.w3schools.com/cssref/css3_pr_text-overflow.asp

 

아래파일은 이 글에서 사용한 코드를 기준으로 만든 html 파일입니다.

mulitple_ellipsis_sample.html

다운로드

#ellipWrap {
	width: 100px;
	background-color: #ccc;
}
.ell {
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 3; /* ellipsis line */
	-webkit-box-orient: vertical;

	/* webkit 엔진을 사용하지 않는 브라우저를 위한 속성. */
	/* height = line-height * line = 1.2em * 3 = 3.6em  */
	line-height: 1.2em;
	height: 3.6em;
}

 

<div id="ellipWrap">
	<p class="ell">
		ellipsis 를 사용해서 말줄임 효과를 적용 가능합니다.
		이 페이지는 두줄 이상의 말줄임 효과를 적용하기 위한 방법 입니다.
	</p>
</div>

 

위 코드의 출력결과이다. 가로 100px, 세로 3줄 출력됩니다.

ellipsis 를 사용해서 말줄임 효과를 적용 가능합니다. 이 페이지는 두줄 이상의 말줄임 효과를 적용하기 위한 방법 입니다.

제가 궁금해서 찾아본 내용이고, 나중에 이 기능이 필요할지 몰라 정리해서 블로그에 올립니다.