🚀 텍스트 말줄임표(...) 간단 적용하기

글자 ellipsis 적용하기

일정한 영역 내에 문단을 넘치지 않으면서 생략 기호를 쓰고 싶어 말줄임표(...)를 적용하고 싶다면, CSS 속성의 text-overflow: ellipsis 를 적용하면 된다. 다만 이 속성을 적용하기 위해선 몇가지 사전 작업이 꼭 필요하다.

1. 적용할 해당 요소는 display 속성이 block / inline-block 이어야 한다 (그래야 width를 적용할수가 있다)
2. 적용할 해당 요소는 width를 지정해주어야 한다. (그래야 넘치는 기준을 정하기 때문이다)
3. 적용할 해당 요소는 overflow가 hidden 이어야 한다. (그래야 넘치는 부분이 가려지기 때문이다)
4. 마지막으로 text-overflow를 ellipsis 로 처리하면 된다

 

싱글 라인 말줄임표 적용

.ellipsis {
    display: inline-block; /* 특정 너비를 가지도록 상황에 따라 block or inline-block 으로 변경 */
    width: 200px; /* inline-block처럼 콘텐츠에 따라 유동적인 너비를 가진다면 직접 너비를 설정 */
    overflow: hidden; /* 넘치는 부분 가리기 */
    text-overflow: ellipsis; /* ... 처리하기 */
    
    white-space: nowrap; /* 줄바꿈 안하기 (한 줄 밑줄임표 적용) */
}

 

멀티 라인 말줄임표 적용

만일 한줄 줄임이 아닌 여러 줄을 적용하고 어느 라인 기전에 말줄임을 적용하고 싶다면 특별한 속성을 사용하여야 한다.

.ellipsis-multi {
    display: block;
    width:22%;
    overflow:hidden;
    text-overflow:ellipsis;

	/* 여러 줄 밑줄임표 적용 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 3번째 줄까지만 글자를 표현하고 그 이후는 줄임 처리 */
}

See the Pen text ellipsis by barzz12 (@inpaSkyrim) on CodePen.