본문 바로가기
개발/Html, Css

[css] 말줄임 표시(ft. text-overflow: ellipsis, 반응형)

by 코딩하는 갓디노 2021. 1. 21.

 

스타일링을 할때 ellipsis에 대해 
정리해 보도록 하겠습니다.



 

게시판 또는 카드 타입의 다이얼로그의 제목 부분이 길어질 경우,
css를 이용하여 일정 크기 이상에서는 '...' 으로 정리합니다.

 

 

css 코드

한 줄로 글자 수 제한 표시 (single line)

· display: block(block레벨)에서만 적용
· text-overflow:ellipsis text가 초과할 경우 생략 부호로 표시
· white-space:nowrap : 공백 문자가 있는 경우 줄 바꿈 하지 않고 한 줄로 나오도록 처리

width:250px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;

 

여러 줄로 글자수 제한 표시 (multi line)

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; //표시 줄 수
-webkit-box-orient: vertical;

 

예제

<html>

<h4>한 줄로 표시</h4>
<p class="singleLine">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus id eligendi expedita dolor quam corrupti commodi pariatur dolores doloribus ipsa eius modi, nemo quisquam veritatis, laborum adipisci optio, itaque, nesciunt.</p>
<hr />
<h4>몇 줄로 표시</h4>
<p class="multiLine">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus id eligendi expedita dolor quam corrupti commodi pariatur dolores doloribus ipsa eius modi, nemo quisquam veritatis, laborum adipisci optio, itaque, nesciunt.</p>

<css>

.singleLine {
	width: 250px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.multiLine {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

화면결과

 

반응형

댓글