본문 바로가기
프로그래머로의 여정

CSS로 텍스트 줄 수 제한하기 (한줄, 두줄, 세줄 효과)

by nunaaa 2025. 8. 31.

CSS로 텍스트 줄 수 제한하기 (한줄, 두줄, 세줄 효과)

CSS를 사용하여 텍스트의 줄 수를 제한하는 방법은 말줄임표(ellipsis) 처리를 통해 이루어집니다. 주로 text-overflow, overflow, white-space, display, -webkit-line-clamp 속성들을 조합하여 사용합니다.

1. 한줄 효과 (Single Line Ellipsis)

한 줄로 제한하고 넘치는 텍스트를 말줄임표로 처리합니다.

기본 코드

.single-line {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%; /* 또는 고정宽度 */
}

예시

<div class="single-line" style="width: 200px;">
  이 텍스트는 한 줄로만 표시되고 넘치는 부분은 말줄임표로 처리됩니다.
</div>

결과:
이 텍스트는 한 줄로만 표시되고 넘치는 부분은...

2. 여러 줄 효과 (Multi-Line Ellipsis)

2줄, 3줄, N줄 효과

-webkit-line-clamp 속성을 사용하여 여러 줄에 대한 말줄임표 처리를 합니다.

기본 코드

.multi-line {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 원하는 줄 수 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

예시: 2줄 효과

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

예시: 3줄 효과

.three-lines {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

예시: 4줄 효과

.four-lines {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

HTML 적용 예시

<div class="two-lines" style="width: 300px;">
  이 텍스트는 두 줄로만 표시됩니다. 세 번째 줄부터는 말줄임표로 처리되어 보이지 않게 됩니다. 매우 긴 텍스트입니다.
</div>

결과 (2줄 효과):

이 텍스트는 두 줄로만 표시됩니다. 세 번째 줄부터는
말줄임표로 처리되어 보이지 않게 됩니다...

🚨 주의사항

  1. -webkit-line-clamp 호환성
    • 웹킷(Webkit) 기반 브라우저(Chrome, Safari, Edge)에서 주로 지원
    • Firefox에서는 2019년 이후 버전에서 지원
    • 대부분의 모던 브라우저에서 사용 가능
  2. height 설정 금지
    • height 또는 max-height을 고정값으로 설정하면 잘림 현상이 발생할 수 있음
    • 줄 높이(line-height)로 간접적으로 높이 제어
  3. 반응형 디자인
    • 부모 요소의 width가 필요함
    • 다양한 화면 크기에서 테스트 필요

✅ 전체 예시 코드

<!DOCTYPE html>
<html>
<head>
<style>
  .box {
    width: 300px;
    margin: 10px;
    border: 1px solid #ddd;
    padding: 10px;
  }

  /* 한줄 효과 */
  .single-line {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* 여러줄 효과 */
  .multi-line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .two-lines { -webkit-line-clamp: 2; }
  .three-lines { -webkit-line-clamp: 3; }
  .four-lines { -webkit-line-clamp: 4; }
</style>
</head>
<body>

<div class="box single-line">
  한줄 효과: CSS로 텍스트 줄 수를 제한하는 방법은 말줄임표 처리를 통해 이루어집니다.
</div>

<div class="box multi-line two-lines">
  두줄 효과: CSS로 텍스트 줄 수를 제한하는 방법은 말줄임표 처리를 통해 이루어집니다. 여러 줄을 처리할 때는 -webkit-line-clamp 속성을 사용합니다.
</div>

<div class="box multi-line three-lines">
  세줄 효과: CSS로 텍스트 줄 수를 제한하는 방법은 말줄임표 처리를 통해 이루어집니다. 여러 줄을 처리할 때는 -webkit-line-clamp 속성을 사용합니다. 이 텍스트는 세 줄까지 표시됩니다.
</div>

<div class="box multi-line four-lines">
  네줄 효과: CSS로 텍스트 줄 수를 제한하는 방법은 말줄임표 처리를 통해 이루어집니다. 여러 줄을 처리할 때는 -webkit-line-clamp 속성을 사용합니다. 이 텍스트는 네 줄까지 표시됩니다. 여기서 더 길어지면 말줄임표가 나타납니다.
</div>

</body>
</html>

이렇게 CSS를 사용하면 깔끔하게 텍스트 줄 수를 제한하면서도 말줄임표로 사용자에게 더 많은 내용이 있음을 알릴 수 있습니다!

'프로그래머로의 여정' 카테고리의 다른 글

_fonts.scss에서 밑줄(_)을 앞에 붙이는 이유  (0) 2025.09.02
유틸리티 클래스(Utility Classes)란  (1) 2025.09.01
CSS의 position: relative와 position: absolute의 차이점  (0) 2025.08.30
position: absolute;가 꼭 필요한 이유  (1) 2025.08.29
CSS에서 text-align: center와 margin: 0 auto  (0) 2025.08.28

관련글

티스토리툴바