[CSS] ellipsis 글자 말줄임 처리 "..."

HTML 글자 말줄임 CSS로 처리하는 방법

1. 1줄 말줄임

<style>
.dataContainer {
	width:200px;			/* 말줄임 글자 길이 조절 */
	white-space:nowrap; 		/* 줄바꿈처리 : 한줄처리(줄바꿈x) */
	overflow:hidden; 		/* 튀어나온 것을 없앤다 */
	text-overflow:ellipsis; 	/* 글자가 넘을 경우 ...만들기 */
}
</style>

1. 2줄 말줄임

<style>
.dataContainer {
    width:200px;
    white-space:normal;
    overflow:hidden;
    text-overflow:ellipsis;

    /* 2줄 말줄임표 추가 */
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}
</style>

 

<div class="dataContainer">
	내용을 말줄임 테스트 입니다 말줄임 점 표시
   </div>

간단한 방법이라 자주 사용할 것 같다.

 

---

공부하면서 유용했던 부분 메모겸 공유하고자 끄적입니다.

고쳐야하는 부분있다면 댓글 남겨주시면 수정하겠습니다.

행복한 하루 보내세요 (❁´◡`❁)