CSS와 JavaScript로 두 번째 줄부터 말줄임 표시하기

웹 개발에서 긴 텍스트를 다룰 때, 특히 첫 번째 줄이 너무 길어 두 번째 줄로 넘어가는 경우가 종종 있습니다. 이럴 때 두 번째 줄부터 말줄임 표시를 적용하고 싶다면 CSS만으로는 해결하기 어렵습니다. 대신, JavaScript를 활용하여 조건에 따라 스타일을 조정하는 방법이 있습니다. 이 글에서는 간단한 예시를 통해 이를 구현하는 방법을 설명하겠습니다.

HTML 구조

먼저, 텍스트를 담을 HTML 구조를 만듭니다. 아래와 같이 text-container와 text 클래스를 가진 두 개의 div 요소를 사용합니다.

<div class="text-container">
    <div class="text">여기에 너무 긴 텍스트가 들어갑니다. 이 텍스트가 너무 길어서 두 번째 줄로 넘어가면, 두 번째 줄부터 말줄임 처리가 되어야 합니다.</div>
</div>

CSS 스타일

다음으로, CSS를 사용하여 텍스트 컨테이너의 너비를 설정하고, 기본적인 스타일을 적용합니다. 아래 예시에서는 200px의 너비를 설정하였습니다.

.text-container {
    width: 200px; /* 원하는 너비 설정 */
    overflow: hidden; /* 내용이 넘칠 경우 숨김 */
}

.text {
    white-space: nowrap; /* 기본적으로 줄바꿈 없이 */
    overflow: hidden;
    text-overflow: ellipsis; /* 말줄임 처리 */
}

JavaScript 추가

마지막으로, JavaScript를 사용하여 텍스트가 컨테이너의 너비를 초과하는지 체크합니다. 초과할 경우 첫 번째 줄은 유지하고, 두 번째 줄부터 말줄임 처리를 하도록 설정합니다.

const textElement = document.querySelector('.text');
const container = document.querySelector('.text-container');

if (textElement.scrollWidth > container.clientWidth) {
    // 텍스트가 넘칠 경우
    textElement.style.whiteSpace = 'nowrap'; // 첫 번째 줄 유지
} else {
    // 텍스트가 넘치지 않을 경우
    textElement.style.whiteSpace = 'normal'; // 줄바꿈 허용
}

결론

이 방법을 통해 긴 텍스트가 첫 번째 줄에 담기고, 두 번째 줄부터는 말줄임 표시가 적용되는 효과를 쉽게 구현할 수 있습니다. CSS와 JavaScript의 조합으로 사용자 친화적인 UI를 구현해 보세요. 이 기술은 블로그, 기사, 제품 설명 등 다양한 웹 페이지에서 활용될 수 있습니다.