CSS로 텍스트 '...' 처리하는 방법

HTML&CSS

by 코드공작소 2024. 1. 8. 15:39

이번 포스팅에서는 CSS를 사용하여 텍스트가 "..."으로 처리하는 방법에 대해 알아보겠습니다.
특히, white-space, overflow, 그리고 text-overflow 속성을 활용하여 간단하고 효과적으로 처리할 수 있습니다.

- 텍스트 한줄로 '...' 처리

여러 줄로 이루어진 텍스트가 이곳에 들어갑니다. 넘치는 부분은 생략 기호로 표시되며 최대 두 줄까지 표시됩니다. 여러 줄로 이루어진 텍스트가 이곳에 들어갑니다. 넘치는 부분은 생략 기호로 표시되며 최대 두 줄까지 표시됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Overflow Example</title>
  <style>
    .text-container {
      width: 200px; /* 텍스트를 담을 컨테이너의 너비를 설정합니다. */
      white-space: nowrap; /* 텍스트가 줄바꿈되지 않도록 설정합니다. */
      overflow: hidden; /* 넘치는 부분은 숨깁니다. */
      text-overflow: ellipsis; /* 넘치는 부분에 "..."을 표시합니다. */
    }
  </style>
</head>
<body>

  <div class="text-container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>

</body>
</html>

이 코드를 통해 텍스트가 .text-container의 너비를 넘어가면 자동으로 "..."으로 표시되는 효과를 얻을 수 있습니다.
이 방법을 활용하여 웹 페이지에서 텍스트 오버플로우를 깔끔하게 처리해보세요!

- 텍스트 2줄부터 '...' 처리

여러 줄로 이루어진 텍스트가 이곳에 들어갑니다. 넘치는 부분은 생략 기호로 표시되며 최대 두 줄까지 표시됩니다. 여러 줄로 이루어진 텍스트가 이곳에 들어갑니다. 넘치는 부분은 생략 기호로 표시되며 최대 두 줄까지 표시됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Multi-line Text Overflow Example</title>
  <style>
    .multiline-text {
      display: -webkit-box;
      -webkit-line-clamp: 2; /* 표시할 최대 줄 수를 지정합니다. */
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  </style>
</head>
<body>

  <div class="multiline-text">
    <p>
      여러 줄로 이루어진 텍스트가 이곳에 들어갑니다. 넘치는 부분은 생략 기호로 표시되며 최대 두 줄까지 표시됩니다.
    </p>
  </div>

</body>
</html>

- 텍스트 3줄 부터 '...' 처리

여러 줄로 이루어진 텍스트가 이곳에 들어갑니다. 넘치는 부분은 생략 기호로 표시되며 최대 두 줄까지 표시됩니다. 여러 줄로 이루어진 텍스트가 이곳에 들어갑니다. 넘치는 부분은 생략 기호로 표시되며 최대 두 줄까지 표시됩니다.

-webkit-line-clamp: 3; /* 표시할 최대 줄 수를 지정합니다. */

이부분을 수정하면 됩니다.

텍스트의 '...' 처리가 원하는 대로 되지 않는 경우가 몇 가지 상황에서 발생할 수 있습니다.
몇 가지 주요 이유와 그에 따른 해결 방법을 살펴보겠습니다.

텍스트가 한 단어로 이루어진 경우:

문제: -webkit-line-clamp는 텍스트를 줄 단위로 처리하므로, 한 단어가 너무 길어서 줄 바꿈이 발생하지 않는 경우 '...' 처리가 되지 않을 수 있습니다.
해결: 해당 경우에는 단어 내에서 줄 바꿈을 강제로 일으키는 방법이 있습니다. 예를 들어, 단어 사이에 <wbr> 태그를 추가하여 강제로 줄 바꿈을 발생시킬 수 있습니다.

<div class="multiline-text">
  <p>
    한단어<wbr>길이너무길어서<wbr>여러줄에걸쳐져있어요.
  </p>
</div>

브라우저 지원 문제:

문제: 일부 브라우저에서 -webkit-line-clamp가 지원되지 않을 수 있습니다.
해결: 대안으로 JavaScript를 사용하여 텍스트를 가공하거나, 서버 측에서 텍스트를 가공하여 전달하는 방법을 고려할 수 있습니다.

폰트나 스타일링 이슈:

문제: 특정 폰트나 스타일링이 적용된 텍스트에서는 '...' 처리가 예상대로 되지 않을 수 있습니다.
해결: 폰트나 스타일링을 수정하거나, 다른 방식으로 텍스트를 가공하여 처리할 수 있습니다.
이러한 상황에 따라 조금 더 세부적인 조정이 필요할 수 있습니다. 원활한 처리를 위해서는 특히 웹 페이지에서 사용하는 텍스트의 특성을 고려하여 적절한 방법을 선택하는 것이 중요합니다.

저작자표시

'HTML&CSS' 카테고리의 다른 글

CSS 최적화 방법 (9)	2024.01.10
<ul> <li> horizontal(가로) 드롭다운 메뉴 만들기: CSS와 애니메이션 활용 (0)	2024.01.08
HTML를 활용한 효과적인 레이아웃 템플릿 9가지 (3)	2024.01.07
CSS에서의 최신 기능들: CSS Grid Level 2 및 Subgrid (0)	2024.01.07
CSS와 Web Accessibility: 접근성을 고려한 디자인 (3)	2024.01.07