[CSS] text-overflow : 내용이 레이아웃 범위를 벗어날 때 말줄임(...) 표시하기

text-overflow

내가 지정한 width 값에 대하여 그 하위 텍스트가 범위를 벗어날 때 사용하는 방법이다. 

 

text-overflow 속성

속성	의미
clip	바깥으로 나오는 기본 값
ellipsis	내용이 넘어가면 ... 표시해줌

 

코드 예시

text-overflow: ellipsis;

 

전체 코드

<div class="overflow">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>

.overflow {
    width: 200px;
    background-color: skyblue;
    white-space: nowrap;	// 줄바꿈을 하지 않고 한 줄로 표시
    text-overflow: ellipsis;	// 레이아웃을 넘어갈 때 ... 표시
    overflow: hidden;		// 레이아웃을 넘어간 요소는 가리기
}