2024-05-14

CSS로 텍스트 길이를 n줄로 제한하는 방법

css text overflow

CSS를 사용하여 텍스트 길이를 n줄로 제한하는 방법

1. white-space 속성 사용:

.text-limit {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 2 * 1.5rem; /* n줄의 높이 설정 */
}
  • white-space: nowrap는 텍스트가 한 줄에 모두 표시되도록 하며,
  • overflow: hidden은 텍스트가 컨테이너를 넘어가는 것을 숨깁니다.
  • text-overflow: ellipsis는 텍스트 끝에 "..."를 추가하여 생략되었음을 표시합니다.
  • height 속성은 컨테이너의 높이를 설정하여 n줄의 텍스트만 표시되도록 합니다. 여기서는 예시로 2줄의 높이를 설정했지만, 원하는 줄 수에 맞게 조정해야 합니다.

2. display 속성 사용:

.text-limit {
  display: -webkit-box;
  -webkit-line-clamp: n; /* n줄 표시 */
  -webkit-box-orient: vertical;
}
  • 이 방법은 웹킷 기반 브라우저(Chrome, Safari 등)에서만 작동합니다.
  • display: -webkit-box는 컨테이너를 블록 요소로 설정합니다.
  • -webkit-line-clamp: n은 컨테이너에 표시될 텍스트 줄 수를 n으로 설정합니다.
  • -webkit-box-orient: vertical은 텍스트가 세로 방향으로 표시되도록 합니다.

3. clamp 함수 사용 (최신 CSS):

.text-limit {
  display: block;
  height: clamp(2 * 1.5rem, /* n줄의 높이 설정 */
                 content-fit,
                 inherit);
  overflow: hidden;
}
  • clamp 함수는 세 개의 값을 받아 그 중 가장 큰 값을 반환합니다.
  • 이 방법은 최신 CSS를 지원하는 브라우저에서만 작동합니다.
  • height 속성에서 clamp 함수를 사용하여 컨테이너의 높이를 n줄의 높이, 컨테이너 내용의 높이, 상속된 높이 중 가장 큰 값으로 설정합니다.

참고:

  • 위의 방법들은 텍스트가 실제로 n줄로 잘려지는 것을 보장하지 않습니다. 텍스트의 글꼴 크기, 행 높이, 여백 등에 따라 실제 표시되는 텍스트 줄 수가 다를 수 있습니다.
  • 더 정확한 제어를 위해서는 JavaScript를 사용하는 방법도 있습니다.

이 외에도 다양한 방법들이 있으니, 상황에 맞는 방법을 선택하여 사용하시기 바랍니다.



CSS 예제 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>텍스트 길이 제한</title>
  <style>
    .text-limit {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      height: 2 * 1.5rem; /* 2줄의 높이 설정 */
    }
  </style>
</head>
<body>
  <div class="text-limit">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum velit libero, eget laoreet orci tincidunt at. Nullam a urna lorem, quis mattis lorem congue. Nam a augue quam, vel hendrerit elit consectetur in. Etiam at arcu velit, sit amet tincidunt tellus bibendum. Praesent vel ante vitae neque pulvinar elementum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed non enim leo, at bibendum risus dictum. Nullam ut purus arcu, nec ultricies eros. Maecenas sit amet tortor vitae orci congue tincidunt. Morbi euismod, orci sit amet consectetur luctus, mauris nunc aliquet lectus, sit amet ullamcorper nibh lorem sed velit.
  </div>
</body>
</html>

2. display 속성 사용:

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>텍스트 길이 제한</title>
  <style>
    .text-limit {
      display: -webkit-box;
      -webkit-line-clamp: 2; /* 2줄 표시 */
      -webkit-box-orient: vertical;
    }
  </style>
</head>
<body>
  <div class="text-limit">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum velit libero, eget laoreet orci tincidunt at. Nullam a urna lorem, quis mattis lorem congue. Nam a augue quam, vel hendrerit elit consectetur in. Etiam at arcu velit, sit amet tincidunt tellus bibendum. Praesent vel ante vitae neque pulvinar elementum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed non enim leo, at bibendum risus dictum. Nullam ut purus arcu, nec ultricies eros. Maecenas sit amet tortor vitae orci congue tincidunt. Morbi euismod, orci sit amet consectetur luctus, mauris nunc aliquet lectus, sit amet ullamcorper nibh lorem sed velit.
  </div>
</body>
</html>

3. clamp 함수 사용 (최신 CSS):

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>텍스트 길이 제한</title>
  <style>
    .text-limit {
      display: block;
      height: clamp(2 * 1.5rem, /* 2줄의 높이 설정 */
                 content-fit,
                 inherit);
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class="text-limit">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum velit libero, eget laoreet orci tincidunt at. Nullam a urna lorem, quis mattis lorem congue. Nam a augue quam, vel hendrerit elit consectetur in. Etiam at arcu velit, sit amet tincidunt tellus bibendum. Praesent vel ante vitae neque pulvinar elementum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames


CSS를 사용하지 않고 텍스트 길이를 제한하는 방법

1. JavaScript 사용:

function limitText(element, maxLength) {
  if (element.textContent.length > maxLength) {
    element.textContent = element.textContent.substring(0, maxLength) + "...";
  }
}

const textElement = document.getElementById('text-limit');
limitText(textElement, 50); // 50자로 제한
  • 위 코드는 limitText 함수를 사용하여 텍스트 길이를 제한합니다.
  • element 매개변수는 제한할 텍스트를 포함하는 HTML 요소를 나타냅니다.
  • maxLength 매개변수는 최대 표시할 텍스트 길이를 나타냅니다.
  • substring 메서드는 문자열의 일부를 추출하는 데 사용됩니다.
  • textContent 속성은 요소의 텍스트 콘텐츠를 가져오거나 설정하는 데 사용됩니다.

2. 서버 측 처리:

  • 서버 측에서 텍스트를 처리하여 원하는 길이로 잘라서 클라이언트에게 전달할 수 있습니다.
  • 이 방법은 서버 측 프로그래밍 언어(PHP, Python, Java 등)에 대한 지식이 필요합니다.

3. 라이브러리 사용:

  • 텍스트 길이 제한 기능을 제공하는 다양한 JavaScript 라이브러리가 있습니다.

이 외에도 다양한 방법들이 있으니, 상황에 맞는 방법을 선택하여 사용하시기 바랍니다.


css text overflow

CSS로 position:fixed 요소를 가운데 정렬하는 3가지 방법

다음은 CSS로 position:fixed 요소를 가운데 정렬하는 몇 가지 방법입니다.display: flex 사용하기display: flex 속성을 사용하면 요소를 가로 또는 세로 방향으로 정렬하는 데 유용한 flexbox 레이아웃을 만들 수 있습니다...


JavaScript로 HTML 요소에서 CSS 클래스 제거하기 (jQuery 없이)

element. classList 속성 사용하기:가장 간단하고 현대적인 방법은 element. classList 속성을 사용하는 것입니다. 이 속성은 요소의 클래스 목록을 나타내는 DOMTokenList 객체를 제공합니다...


CSS 삼각형의 스타일 지정

먼저 삼각형의 세 꼭짓점의 좌표를 결정합니다. 좌표는 CSS의 position 속성을 사용하여 지정합니다.그런 다음 삼각형의 너비와 높이를 결정합니다. 너비와 높이는 CSS의 width 및 height 속성을 사용하여 지정합니다...


Bootstrap 너비 고정: 깨지지 않는 레이아웃을 위한 비법

방법:<td> 태그에 width 속성을 추가하여 원하는 너비를 지정합니다. 예를 들어, 다음 코드는 <td>의 너비를 100px로 설정합니다.장점:간단하고 직관적입니다.모든 브라우저에서 호환됩니다.단점:px 단위를 사용하면 화면 해상도에 따라 너비가 달라질 수 있습니다...