[CSS] 말줄임표

한 줄 말줄임표

div {
    /* 텍스트를 한 줄로 표시 */
    white-space: nowrap;
    /* 박스의 크기를 넘어가는 컨텐츠 숨기기 */
    overflow: hidden;
    /* 텍스트가 넘어간다면 말줄임표 표시 */
    text-overflow: ellipsis;
}

해당 방법은 block 요소에서만 사용 가능합니다.

여러 줄 말줄임표

div {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

webkit 엔진을 사용하지 않는 브라우저에서는 원하는 동작이 나오지 않을 수 있습니다.

말줄임표 뒤에 컨텐츠 두기

See the Pen 말줄임표 by FE4902 (@fe4902) on CodePen.

 

해당 포스팅은 이 글을 참고하여 작성했습니다.