[javascript] 자바스크립트 문자열 생략, 길이 제한 (truncate)

728x90

참고: https://www.freecodecamp.org/news/how-to-truncate-text-with-css-javascript/

CSS는 프로그래밍 툴킷에 포함할 수 있는 강력한 도구입니다. 이는 반응이 빠르고 매력적인 웹 사이트를 만들 수 있는 다양한 기능을 제공합니다.

가끔 일부 콘텐츠나 텍스트가 줄임표(...)로 생략됐거나 숨겨져 있는 것을 본 적 있을 것 입니다. 해당 기능을 어떻게 개발하는지 궁금하지 않나요? 이 포스트에서는 JavaScript와 CSS를 사용하여 여러 줄 자르기 및 생략하는 방법을 알아보겠습니다.

text truncation 이란?

CSS에서 text truncation은 추가적인 콘텐츠를 숨기고 줄임표(...)로 대체하여 문자열이 컨테이너에서 넘치치 않게 합니다. 이 기술은 네비게이션 바, 테이블 셀, 제목과 같이 문자열 길이가 매번 다를 수 있는 상황에서 보다 간결하고 시작적으로 매력적인 레이아웃을 만드는 데 사용합니다.

문자열 숨김에 사용하는 CSS 속성은 text-overflow입니다. 문자열 숨김을 활성화 하려면 text-overflow 속성을 "ellipsis"로 설정하고 white-space 속성을 "nowrap"으로 설정하여 문자열이 다음 줄로 줄 바꿈 하지 않도록 해야 합니다. 컨테이너에서 넘친 문자열을 숨기려면 overflow 속성을 "hidden"으로 설정해야하는 경우도 있습니다.

문자열을 숨기는 CSS 속성

CSS의 여러 속성을 사용하여 문자열을 숨길 수 있습니다. 다음은 문자열을 숨기는 일반적인 CSS 속성입니다.

text-overflow: 이 속성은 문자열이 요소의 영역에서 넘칠 때 문자열을 표시하는 방법을 지정합니다. text-overflow 속성의 값으로 다음 중 하나를 선택할 수 있습니다.

clip: 문자열이 요소 영역을 넘어가면 잘려서 표시되지 않습니다.
ellipsis 문자열이 요소를 넘어가면 넘어간 부분은 잘리고 줄임표(...)가 문자열 뒤에 붙습니다.
fade: 문자열이 요소를 넘어가면 자르고 페이드 효과를 줍니다.

white-space: 이 속성은 문자열의 공백 문자가 처리되는 방법을 제어합니다. white-space 속성은 다음과 같은 값을 가질 수 있습니다.

normal: 브라우저는 사용 가능한 공간에 맞게 문자열의 줄을 나눕니다.
nowrap: 문자열의 줄을 나누지 않도록 하여 문자열이 요소의 영역을 넘어갈 수 있습니다.
pre: 브라우저는 공백 문자를 보존하도록 하여 문자열이 요소에서 넘칠 수 있습니다.

overflow: 이 속성은 넘친 콘텐츠를 어떻게 처리할지를 지정합니다. overflow 속성은 다음의 값을 가질 수 있습니다.

visible: 넘친 콘텐츠가 표시되면 잘리지 않습니다.
hidden: 넘친 콘텐츠를 숨겨 표시하지 않습니다.
scroll: 넘친 콘텐츠가 표시되고 스크롤 할 수 있게 스크롤 바가 생깁니다.
auto: 콘텐츠를 표시하고 요소보다 콘텐츠가 큰 경우 스크롤 바가 생깁니다.

문자열을 숨기려면 text-overflow, white-space, overflow 속성을 함께 사용해야 합니다.

Dynamic Truncation

CSS로 동적 숨기기를 구현하여 웹 페이지에 문자열 콘텐츠를 표시할 수도 있습니다. CSS를 사용해 동적 숨기기를 구현하는 일반적인 방법은 사용자가 콘텐츠를 확장할 수 있도록 "read more" 링크 또는 버튼을 제공하면서 컨테이너에 표시되는 문자열의 양을 제한하는 것 입니다.

다음은 문자열 숨김을 동적으로 하는 HTML 및 CSS 코드 입니다. 여기서는 문자열의 너비를 보이기 위해 문자열에 테두리를 쳤습니다.

<html>

<body>
  <div class="list">
    <div class="card">
      <h3>First Example</h3>
      <p class="text single-line">
        mollis, ante non euismod ornare, orci diam ornare orci, eu mattis
        tortor lectus at erat. Nam rutrum erat nec euismod lacinia. Curabitur
        et velit ut mauris euismod tempus. Fusce pharetra augue lectus, quis
        maximus quam auctor pellentesque.
      </p>
    </div>
    <div class="card">
      <h3>Second Example header</h3>
      <p class="text single-line">
        Curabitur pharetra, erat a gravida malesuada, augue mi tincidunt odio,
        quis rhoncus tortor metus ut purus. Nunc lectus quam, tempus sed
        mollis id, feugiat a quam. Donec posuere nulla a lacus interdum
        faucibus ut tincidunt nisi.
      </p>
    </div>
  </div>
</body>

</html>

<body>
  <div class="list">
    <div class="card">
      <h3>First Example</h3>
      <p class="text single-line">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam augue nulla, elementum non erat id, cursus feugiat
        sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam velit neque,
        tincidunt in ipsum vel, accumsan mattis nisi.
      </p>
    </div>
    <div class="card">
      <h3>Second Example header</h3>
      <p class="text single-line">
        Curabitur pharetra, erat a gravida malesuada, augue mi tincidunt odio, quis rhoncus tortor metus ut purus. Nunc
        lectus quam, tempus sed mollis id, feugiat a quam. Donec posuere nulla a lacus interdum faucibus ut tincidunt
        nisi. Curabitur consequat vitae turpis quis lobortis.
      </p>
    </div>
  </div>

</body>

</html>

다음의 이미지는 CSS 적용 없이 위의 HTML을 실행한 화면입니다.

다음은 넘치는 문자열을 숨기는 CSS 코드입니다.

.list {
  display: flex;
  flex-direction: column;
}

.card {
  border: 1px solid #1948e3;
  border-radius: 8px;
  height: 100px;
  margin: 0 auto;
  padding: 15px 25px;
  width: 350px;
}

.card:not(:last-of-type) {
  margin-bottom: 20px;
}

.text.single-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

위의 CSS를 적용하면 다음과 같은 화면을 볼 수 있습니다.

특정 줄 수를 허용하는 문자열 숨기기

CSS 속성은 한 줄의 문자열 또는 여러 줄 문자열을 효과적으로 숨깁니다. 그러나 JavaScript를 사용하면 특정 줄 수를 허용하고 나머지를 숨기는 것이 가능합니다.

다음 섹션에서는 CSS를 사용하는 방법과 JavaScript를 사용하는 방법 등 여러 줄 문자열 숨김을 위한 방법을 알아보겠습니다. 두 방법을 모두 검토하면 프로젝트에 가장 적합한 기술을 선택할 수 있습니다.

CSS를 사용하여 특정 줄 수 허용

CSS 속성은 한 줄의 문자열과 두 줄 이상의 문자열에 대해 잘 작동합니다. 첫 번째 단계는 박스나 요소의 높이를 지정하는 것 입니다. 다음으로 화면에 보일 최대 높이를 계산하기 위해 문자열의 높이에 허용할 문자열의 줄 수를 곱합니다.

<body>
  <h3>Multi-line Text Truncation overflow!</h3>

  <p class="truncate-overflow">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. In sint facilis
    explicabo voluptatum exercitationem earum. Quibusdam vitae, iusto temporibus
    corrupti tempore distinctio soluta reiciendis. Ab aspernatur facilis autem
    temporibus veniam.
  </p>

  <p class="truncate-overflow">
    Multi-line text truncation is a common design pattern that allows designers to show a limited amount of text on a
    web page or application, while still giving users the ability to see more if they desire.
  </p>

  <p class="truncate-overflow">
    In CSS, there are several ways to truncate multi-line text, including using the text-overflow property in
    combination with display, white-space, and overflow.
  </p>
</body>

다음의 위 HTML을 실행 결과입니다.

이제 overflow 속성을 hidden으로 설정하고 max-height를 원하는 숫자로 지정합니다.

:root {
  --lh: 1.4rem;
}

html {
  max-width: 22rem;
  margin: 2rem auto;
  line-height: var(--lh);
}

.truncate-overflow {
  --max-lines: 3;
  border: 1px solid #1948e3;
  position: relative;
  max-height: calc(var(--lh) * var(--max-lines));
  overflow: hidden;
  padding-right: 1rem;
}
.truncate-overflow::before {
  position: absolute;
  content: "...";
  bottom: 0;
  right: 0;
}
.truncate-overflow::after {
  content: "";
  position: absolute;
  right: 0;
  width: 1rem;
  height: 1rem;
  background: white;
}

위의 CSS를 적용하면 특정 줄 수를 허용하는 문자열 숨김을 볼 수 있습니다.

JavaScript를 사용하여 특정 줄 수 허용

JavaScript에도 문자열을 숨기는 기능이 있습니다. 다음은 특정 문자 수에 따라 문자열을 자르는 JavaScript의 예제입니다.

<html>

<head>
  <style>
    #text {
      border: 1px solid black;
      padding: 10px;
    }
  </style>
</head>

<body>
  <div>
    <h1>Text Truncate Example Header</h1>
    <p id="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in sapien
      eu velit eleifend ullamcorper eget vitae nulla. Aenean euismod purus sed
      neque dictum, nec lobortis ante faucibus.
    </p>
    <button onclick="truncateText()">Truncate Text</button>
  </div>

  <script>
    function truncateText() {
      var text = document.getElementById("text").innerHTML;
      var truncated = text.substring(0, 50) + "...";
      document.getElementById("text").innerHTML = truncated;
    }
  </script>
</body>

</html>

위의 코드를 실행하면 다음과 같은 화면을 볼 수 있습니다.

예제의 HTML 코드에 id가 "text"인 p 요소가 있습니다. JavaScript 코드의 truncateText() 함수는 p 요소에서 문자열을 검사합니다. 이 코드로 인해 "Truncate Text" 버튼을 누르면 문자열이 50 자로 잘리고 끝에 줄임표(...)가 추가됩니다. 다음은 버튼을 누른 후의 화면입니다.

줄임표 뒤에 요소를 추가하는 방법

ellipsis(...)는 문자열 숨김을 나타내며 일부 콘텐츠가 생략되었음을 나타냅니다. text-overflow 속성은 컨테이너에서 넘친 문자열을 어떻게 처리할지를 지정하는 데 사용합니다.

<div class="parent-box box">
  <div class="child-box">
    You are learning text truncation with javascript, which is done with these
    three steps
  </div>
</div>

다음은 ellipsis를 적용하기 전의 화면입니다.

여기에서 문자열을 숨길 child-box뒤에 또 다른 콘텐츠를 추가하기 위해 child-box에 :after 수도 요소를 추가했습니다. box 클래스에는 overflow: hidden을 주고 text-overflow: ellipsis를 설정했습니다.

.box {
  margin: 10px;
  padding: 10px;
  border: 1px solid rgb(0, 0, 0);
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}

.child-box::after {
  content: "+";
  position: absolute;
  right: 0;
  bottom: 0;
}

.no-max-width {
  max-width: none;
}

다음은 CSS를 적용한 화면입니다.

정리

이 포스트에서는 다양한 CSS 및 JavaScript 접근 방법을 사용하여 문자열을 숨기는 방법을 알아봤습니다. 또한 일부 상황에서는 까다로울 수도 있는 문자열 숨김 뒤에 요소를 추가하는 방법도 살펴봤습니다.

자바스크립트 문자열 찾기 (substring)

저작자표시 비영리 변경금지

'dev > javascript' 카테고리의 다른 글

[javascript] 자바스크립트 좋아요 버튼 만들기 (9)	2023.05.22
[javascript] 자바스크립트 배열 추가 (push) (8)	2023.05.21
[javascript] 자바스크립트 마우스 커서 모양 변경 (10)	2023.05.17
[javascript] 자바스크립트 별점 주기 (star rating) (10)	2023.05.17
[javascript] 자바스크립트 문자열 뒤집기 (reverse string) (11)	2023.05.16

달삼쓰뱉

[javascript] 자바스크립트 문자열 생략, 길이 제한 (truncate)

text truncation 이란?

문자열을 숨기는 CSS 속성

Dynamic Truncation

특정 줄 수를 허용하는 문자열 숨기기

CSS를 사용하여 특정 줄 수 허용

JavaScript를 사용하여 특정 줄 수 허용

줄임표 뒤에 요소를 추가하는 방법

정리

관련 글

'dev > javascript' 카테고리의 다른 글

댓글

티스토리툴바

[javascript] 자바스크립트 문자열 생략, 길이 제한 (truncate)

text truncation 이란?

문자열을 숨기는 CSS 속성

Dynamic Truncation

특정 줄 수를 허용하는 문자열 숨기기

CSS를 사용하여 특정 줄 수 허용

JavaScript를 사용하여 특정 줄 수 허용

줄임표 뒤에 요소를 추가하는 방법

정리

관련 글

'dev > javascript' 카테고리의 다른 글

관련글

댓글

티스토리툴바