CSS 말줄임 표시(…) – 한 줄, 여러 줄 말줄임 표시하는 방법

CSS로 말줄임을 표시(`...`)하는 방법

CSS로 텍스트의 말줄임을 표시(...)하는 방법을 알려드립니다!
다음의 목차로 예제와 함께 살펴보겠습니다.

텍스트가 한 줄로 되어 있어 줄바꿈하지 않고 말줄임을 표시하는 방법
텍스트를 지정된 줄 수로 제한해서 말줄임을 표시하는 방법

초보자도 쉽게 이해할 수 있도록 예시와 팁을 제공합니다.

텍스트가 한 줄로 되어 있어 줄바꿈하지 않고 말줄임을 표시하는 방법

한 줄 말줄임은 text-overflow 속성을 활용합니다.

CSS로 특별한 처리를 하지 않은 텍스트는 콘텐츠 박스의 끝에 도달했을 때 자동으로 줄바꿈하게 됩니다.
여기에서는 텍스트가 콘텐츠 박스의 끝에 도달했을 때 자동으로 줄바꿈하지 않고 오버플로우되는 텍스트는 숨기고 생략 부호(...)를 표시하는 방법에 대해 알아봅니다.

데모로 이해하기

CSS

div {
    width: 200px;
    border: 2px solid red;

    /* 줄바꿈하지 않고 말줄임을 표시하는 
       방법에 필요한 CSS 속성들 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

HTML

<div>
    텍스트가 콘텐츠 박스의 끝에 도달했을 때
    자동으로 줄바꿈하지 않고
    오버플로우되는 텍스트는 숨기고
    생략 부호(...)를 표시하는
    방법에 대해 알아봅니다.
</div>

위 데모의 구현은 text-overflow 속성을 활용한 것입니다.
이 속성의 기능을 알면 텍스트가 한 줄로 되어 있어 줄바꿈하지 않고 말줄임을 표시하는 방법에 대해 쉽게 이해할 수 있습니다.

`text-overflow` 속성을 활용하는 방법 상세한 설명

text-overflow 속성은
블록 컨테이너 요소의 텍스트 영역을 벗어나 줄바꿈하지 않고 오버플로우되어 숨겨진 텍스트가 있는지를 시각적으로 나타내는 생략 부호를 표시할지(예를 들어 ...) 아니면 그냥 숨겨진 채로 남겨둘지를 설정합니다.

블록 컨테이너 요소란 너비나 높이를 지정할 수 있는 요소를 말합니다.

이 속성은 블록 컨테이너 요소에만 적용할 수 있습니다.

아래의 데모를 통해 알아보겠습니다.

CSS 데모: text-overflow

데모의 구현을 순서대로 설명하겠습니다.

아무런 설정이 없는 <div> 태그의 일반적인 텍스트 영역입니다.

HTML

<div>
    text-overflow 속성은 텍스트 영역을 벗어나
    오버플로우되어 숨겨진 텍스트가 있는지를
    시각적으로 나타내는 생략 부호를 표시할지
    아니면 그냥 숨겨진 채로 남겨둘지를 설정합니다.
</div>

데모에서 공통으로 사용할 텍스트 영역을 나타내는 <div> 태그에 공통 스타일 설정하겠습니다.

일반적인 텍스트 영역은 위의 실제 적용된 모습을 보면 알 수 있듯이 텍스트가 콘텐츠 박스의 끝에 도달했을 때 자동으로 줄바꿈 시킵니다.

텍스트가 줄바꿈하지 않고 텍스트 영역을 벗어나도록(오버플로우되도록) white-space: nowrap을 설정하였습니다.

HTML

<div style="white-space: nowrap;">
    text-overflow 속성은 텍스트 영역을 벗어나
    오버플로우되어 숨겨진 텍스트가 있는지를
    시각적으로 나타내는 생략 부호를 표시할지
    아니면 그냥 숨겨진 채로 남겨둘지를 설정합니다.
</div>

white-space 속성은 요소 내부의 공백 문자(Whitespace) 처리와 줄바꿈 규칙을 설정합니다. white-space: nowrap으로 지정하면 텍스트가 콘텐츠 박스의 끝에 도달했을 때 자동으로 줄바꿈 시키던 것을 자동으로 줄바꿈 시키지 않습니다. 즉 텍스트가 텍스트 영역을 벗어나 오버플로우됩니다.

CSS white-space 속성

오버플로우된 텍스트를 보여지지 않도록 overflow: hidden으로 숨기겠습니다.

HTML

<div style="white-space: nowrap; overflow: hidden;">
    text-overflow 속성은 텍스트 영역을 벗어나
    오버플로우되어 숨겨진 텍스트가 있는지를
    시각적으로 나타내는 생략 부호를 표시할지
    아니면 그냥 숨겨진 채로 남겨둘지를 설정합니다.
</div>

텍스트 영역을 벗어나 오버플로우되어 숨겨진 텍스트를 text-overflow 속성으로 생략 부호를 표시하겠습니다.

HTML

<div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
    text-overflow 속성은 텍스트 영역을 벗어나
    오버플로우되어 숨겨진 텍스트가 있는지를
    시각적으로 나타내는 생략 부호를 표시할지
    아니면 그냥 숨겨진 채로 남겨둘지를 설정합니다.
</div>

text-overflow 속성의 값을 ellipsis로 지정하면 위의 실제 적용된 모습처럼 생략 부호(...)가 표시됩니다.

주의할 점

text-overflow 속성은 다음의 세 조건이 부합되어야 구현이 가능합니다.

overflow 속성은 visible 값이 아니어야 합니다. hidden이나 scroll 또는 auto 값으로 적용되어 있어야 합니다.
whit-space 속성은 텍스트가 콘텐츠 박스의 끝에 도달했을 때 자동으로 줄바꿈 시키던 것을 자동으로 줄바꿈 시키지 않게 하는 nowrap이나 pre 값으로 적용되어 있어야 합니다.
그리고, 이 속성들과 값들이 적용되기 위해서는 해당 요소가 너비나 높이를 지정할 수 있는 블록 컨테이너 요소이어야 합니다.

이 세 조건이 부합되지 않으면 해당하는 요소는 text-overflow 속성이 적용되지 않습니다. 이는 당연하게도 이 두 조건 하에서 시각적으로 나타내는 생략 부호를 표시할지를 설정는 속성이기 때문입니다.

텍스트를 지정된 줄 수로 제한해서 말줄임을 표시하는 방법

텍스트를 지정된 줄 수로 제한해서 말줄임을 표시하는 방법은 -webkit-line-clamp 속성을 활용하는 것입니다.

다음의 데모는 -webkit-line-clamp 속성을 활용해서 텍스트 영역의 줄바꿈하는 텍스트를 3줄로 제한해서 제한한 줄 수 보다 텍스트가 길면 생략 부호(...)를 표시하는 예시입니다.

데모로 이해하기

아래의 데모를 통해 알아보겠습니다.

CSS

div {
    max-width: 200px;
    border: 2px solid red;

    /* 텍스트를 지정된 줄 수로 제한해서 말줄임을 표시하는
       방법에 필요한 CSS 속성들 */
    display: -webkit-box;   
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 3; /* 제한할 텍스트의 줄 수 */
}

HTML

<div>
    -webkit-line-clamp속성은 텍스트 블록을 지정된 줄 수로 제한해서 표시하는 속성입니다.
    이 속성은 해당 요소의 display 속성의 값이 -webkit-box로 설정되고
    -webkit-box-orient 속성의 값이 vertical로 설정되어 있을 경우에 작동합니다.
    이때 제한한 줄 수 보다 텍스트가 길면 생략 부호(...)를 표시합니다.
    해당 요소의 overflow 속성의 값이 visible이 아닌 값으로 설정되어 있으면
    지정된 줄 수로 제한해서 텍스트가 잘리지만
    그렇지 않으면 생략 부호(...)를 표시한 이 후에도 텍스트가 계속 표시됩니다.
</div>

실제 적용된 모습

-webkit-line-clamp속성은 텍스트 블록을 지정된 줄 수로 제한해서 표시하는 속성입니다. 이 속성은 해당 요소의 display 속성의 값이 -webkit-box로 설정되고 -webkit-box-orient 속성의 값이 vertical로 설정되어 있을 경우에 작동합니다. 이때 제한한 줄 수 보다 텍스트가 길면 생략 부호(...)를 표시합니다. 해당 요소의 overflow 속성의 값이 visible이 아닌 값으로 설정되어 있으면 지정된 줄 수로 제한해서 텍스트가 잘리지만 그렇지 않으면 생략 부호(...)를 표시한 이 후에도 텍스트가 계속 표시됩니다.

-webkit-line-clamp 속성의 값으로 제한할 텍스트의 줄 수(0보다 큰 정수)를 지정하면 됩니다.

-webkit-line-clamp 속성의 기능을 알면 텍스트를 지정된 줄 수로 제한해서 말줄임을 표시하는 방법에 대해 쉽게 이해할 수 있습니다.

`-webkit-line-clamp` 속성을 활용하는 방법 상세한 설명

-webkit-line-clamp 속성은
텍스트 영역의 줄바꿈하는 텍스트를 지정된 줄 수로 제한해서 제한한 줄 수 보다 텍스트가 길면 생략 부호(...)를 표시하는 속성입니다.

이 속성은 해당 요소의 display 속성의 값이 -webkit-box로 설정되고 -webkit-box-orient 속성의 값이 vertical로 설정되어 있을 경우에 작동합니다. 이때 제한한 줄 수 보다 텍스트가 길면 생략 부호(...)를 표시합니다. 해당 요소의 overflow 속성의 값이 visible이 아닌 값으로 설정되어 있으면 지정된 줄 수로 제한해서 텍스트가 잘리지만, 그렇지 않으면 생략 부호(...)를 표시한 이 후에도 텍스트가 계속 표시됩니다.

주의할 점

-webkit-line-clamp 속성을 구현하려면 두 가지 주의해야 할 점이 있습니다.

`display: -webkit-box;`와 `-webkit-box-orient: vertical;`를 필수로 적용

-webkit-line-clamp 속성은 display: -webkit-box;와 -webkit-box-orient: vertical; 적용되어 있을 때 구현하는 속성입니다. 이 두 속성의 값이 적용되어 있지 않는 요소에는 적용되지 않습니다.

CSS

p {
    max-width: 200px;
    border: 2px solid red;
    overflow: visible;
    -webkit-line-clamp: 2;
    /* display: -webkit-box;과
       webkit-box-orient: vertical;를 적용하지 않았습니다. */
}

HTML

<div>
    -webkit-line-clamp속성은 텍스트 블록을 지정된 줄 수로 제한해서 표시하는 속성입니다.
    이 속성은 해당 요소의 display 속성의 값이 -webkit-box로 설정되고
    -webkit-box-orient 속성의 값이 vertical로 설정되어 있을 경우에 작동합니다.
    이때 제한한 줄 수 보다 텍스트가 길면 생략 부호(...)를 표시합니다.
    해당 요소의 overflow 속성의 값이 visible이 아닌 값으로 설정되어 있으면
    지정된 줄 수로 제한해서 텍스트가 잘리지만
    그렇지 않으면 생략 부호(...)를 표시한 이 후에도 텍스트가 계속 표시됩니다.
</div>

해당 요소의 `overflow` 속성의 값이 `visible`이 아닌 값 적용

해당 요소의 overflow 속성의 값이 visible이 아닌 값(hidden, auto, scroll)으로 설정되어 있으면 지정된 줄 수로 제한해서 텍스트가 잘리지만, 그렇지 않으면 생략 부호로(...)를 표시한 이 후에도 텍스트가 계속 표시됩니다.

다음은 해당 요소의 overflow 속성의 값을 visible로 잘못 설정해서 생략 부호로(...)를 표시한 이 후에도 텍스트가 계속 표시되는 예제입니다.

CSS

p {
    max-width: 200px;
    border: 2px solid red;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    
     /* 생략 부호(...)를 표시한 이 후에도
        텍스트가 계속 표시됩니다. */
    overflow: visible;/
}

HTML

<div>
    -webkit-line-clamp속성은 텍스트 블록을 지정된 줄 수로 제한해서 표시하는 속성입니다.
    이 속성은 해당 요소의 display 속성의 값이 -webkit-box로 설정되고
    -webkit-box-orient 속성의 값이 vertical로 설정되어 있을 경우에 작동합니다.
    이때 제한한 줄 수 보다 텍스트가 길면 생략 부호(...)를 표시합니다.
    해당 요소의 overflow 속성의 값이 visible이 아닌 값으로 설정되어 있으면
    지정된 줄 수로 제한해서 텍스트가 잘리지만
    그렇지 않으면 생략 부호(...)를 표시한 이 후에도 텍스트가 계속 표시됩니다.
</div>

실제 적용된 모습 생략 부호(...)를 표시 이 후에도 텍스트가 계속 표시됩니다.

브라우저 호환성

text-overflow와 -webkit-line-clamp 속성의 브라우저 호환성
속성	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`text-overflow`	1	12	7	3
`-webkit-line-clamp`	6	17	68	5

CSS 말줄임 표시(…) – 한 줄, 여러 줄 말줄임 표시하는 방법

CSS로 말줄임을 표시(`...`)하는 방법

텍스트가 한 줄로 되어 있어 줄바꿈하지 않고 말줄임을 표시하는 방법

데모로 이해하기

`text-overflow` 속성을 활용하는 방법 상세한 설명

CSS 데모: text-overflow

주의할 점

텍스트를 지정된 줄 수로 제한해서 말줄임을 표시하는 방법

데모로 이해하기

`-webkit-line-clamp` 속성을 활용하는 방법 상세한 설명

주의할 점

`display: -webkit-box;`와 `-webkit-box-orient: vertical;`를 필수로 적용

해당 요소의 `overflow` 속성의 값이 `visible`이 아닌 값 적용

브라우저 호환성

참고문헌

같이 보기

CSS로 말줄임을 표시(...)하는 방법

텍스트가 한 줄로 되어 있어 줄바꿈하지 않고 말줄임을 표시하는 방법

데모로 이해하기

text-overflow 속성을 활용하는 방법 상세한 설명

CSS 데모: text-overflow

주의할 점

텍스트를 지정된 줄 수로 제한해서 말줄임을 표시하는 방법

데모로 이해하기

-webkit-line-clamp 속성을 활용하는 방법 상세한 설명

주의할 점

display: -webkit-box;와 -webkit-box-orient: vertical;를 필수로 적용

해당 요소의 overflow 속성의 값이 visible이 아닌 값 적용

브라우저 호환성

참고문헌

같이 보기

CSS로 말줄임을 표시(`...`)하는 방법

`text-overflow` 속성을 활용하는 방법 상세한 설명

`-webkit-line-clamp` 속성을 활용하는 방법 상세한 설명

`display: -webkit-box;`와 `-webkit-box-orient: vertical;`를 필수로 적용

해당 요소의 `overflow` 속성의 값이 `visible`이 아닌 값 적용