[JS] 말줄임표(…) 한줄, 두줄에 적용하기

말줄임표(ellipsis)는 긴 문장이나 내용을 간결하게 표현하고자 할 때 사용되는 텍스트 처리 기법입니다. 말줄임표는 글자 수를 줄이는 동시에 중요한 내용을 강조하고 시각적으로도 깔끔한 결과를 만들어냅니다. 이번 글에서는 JavaScript를 활용하여 말줄임표를 한 줄과 두 줄에 각각 적용하는 방법을 알아보겠습니다.

1. 말줄임표(ellipsis)란?

말줄임표(ellipsis)란 긴 문장이나 내용을 간결하게 표현하기 위해 사용되는 텍스트 처리 기법입니다. 말줄임표는 “…”으로 표시되며, 원래 긴 내용을 축약하여 나타내는 방법입니다. 이는 주로 긴 텍스트를 간결하게 표현하면서도 중요한 정보를 강조하고자 할 때 사용됩니다. 말줄임표는 사용자가 빠르게 내용을 파악할 수 있도록 도와주고, 동시에 시각적으로도 깔끔한 디자인을 제공하는 역할을 합니다.

2. 한 줄에 말줄임표 적용하기

한 줄에 말줄임표를 적용하는 경우, 텍스트가 지정한 길이를 초과할 때 말줄임표로 대체됩니다. 이는 주로 제목이나 간단한 문구를 간결하게 표현할 때 사용됩니다.

예를 들어, 아래와 같은 HTML과 CSS를 가진 요소가 있다고 가정해봅시다.

<div class="truncate">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<style>
    .truncate {
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>

위 코드에서 text-overflow: ellipsis; 속성이 말줄임표를 적용하는 핵심입니다. 결과적으로 텍스트가 지정한 너비를 초과할 경우 말줄임표로 대체됩니다.

3. 두 줄에 말줄임표 적용하기

텍스트가 한 줄로 간결하지 않을 때, 두 줄에 말줄임표를 적용하여 일부 내용을 표시하는 방법도 있습니다. 이는 내용이 길어 한 번에 전부 보여주기 어려울 때 유용합니다.

예를 들어, 다음과 같은 CSS를 사용하여 두 줄에 말줄임표를 적용할 수 있습니다.

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

4. JavaScript로 말줄임표 구현하기

JavaScript를 활용하여 동적으로 말줄임표를 적용할 수도 있습니다. 특히, 사용자 입력이나 동적으로 생성되는 내용에 유용한 방법입니다.

function applyEllipsis(element, lines) {
    const lineHeight = parseInt(window.getComputedStyle(element).lineHeight);
    const maxHeight = lineHeight * lines;
    
    while (element.scrollHeight > maxHeight) {
        element.textContent = element.textContent.replace(/\W*\s(\S)*$/, '...');
    }
}

위 함수는 주어진 요소의 텍스트가 주어진 줄 수를 초과할 경우 말줄임표로 대체합니다.

5. 마무리

말줄임표는 긴 내용을 간결하게 표현하고 사용자가 중요한 정보를 놓치지 않도록 도와주는 유용한 텍스트 처리 기법입니다. CSS와 JavaScript를 적절히 활용하여 한 줄과 두 줄에 말줄임표를 적용하는 방법을 익혀보세요. 이를 통해 웹 페이지의 사용자 경험을 향상시키고 내용을 더욱 가독성 있게 표현할 수 있습니다.

자주 묻는 질문(FAQs)

Q1: 말줄임표를 적용한 텍스트가 모바일에서도 동작할까요?

A1: 네, 말줄임표는 모바일에서도 동일하게 동작합니다. CSS 속성을 활용하거나 JavaScript 함수를 사용하여 모바일 환경에서도 말줄임표를 적용할 수 있습니다.

Q2: 말줄임표가 있는 텍스트를 클릭하면 전체 내용을 볼 수 있을까요?

A2: 일반적으로 말줄임표를 클릭하면 전체 내용을 볼 수 있는 동작은 자동으로 지원되지 않습니다. 클릭 시 전체 내용을 보여주는 기능을 추가하려면 JavaScript와 CSS를 활용하여 구현해야 합니다.

Q3: 말줄임표를 적용할 때 텍스트가 짤릴 수 있을까요?

A3: 말줄임표를 적용할 때 텍스트가 짤릴 수 있습니다. 따라서 말줄임표가 적용되는 텍스트의 길이와 화면 크기를 고려하여 적절한 디자인을 선택해야 합니다.