textOverflow 속성으로 텍스트 오버플로 문제 해결하기
웹 개발을 하다 보면 텍스트가 지정된 영역보다 길어져 요소 밖으로 삐져나오는 텍스트 오버플로(text overflow) 현상을 자주 마주하게 됩니다. 이러한 문제를 해결하는 대표적인 방법은 textOverflow 속성을 활용하는 것입니다.
textOverflow 속성에 ellipsis 값을 설정하면, 텍스트가 포함 요소(containing element)의 경계를 넘어갈 때 잘린 부분이 말줄임표(...)로 표시되어 콘텐츠가 잘렸다는 사실을 사용자에게 자연스럽게 알려줄 수 있습니다.
동작 원리
말줄임표가 정상적으로 적용되려면 다음 세 가지 CSS 조건이 함께 충족되어야 합니다.
overflow: hidden;— 넘친 내용을 숨김 처리white-space: nowrap;— 줄바꿈 없이 한 줄로 표시text-overflow: ellipsis;— 잘린 텍스트 뒤에 말줄임표 추가
예제 코드
아래 예제는 버튼을 클릭하면 JavaScript의 style.textOverflow 속성을 통해 동적으로 말줄임표를 적용하는 방법을 보여줍니다. 직접 실행해 보면서 동작 방식을 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
#myID {
border: 2px solid blue;
background-color: gray;
overflow: hidden;
text-overflow: visible;
width: 200px;
white-space: nowrap;
}
</style>
</head>
<body>
<button onclick = "display()"> Click </button>
<div id = "myID">
This is Demo Text! This is Demo Text! This is Demo Text!<br>
This is Demo Text! This is Demo Text! This is Demo Text!<br>
This is Demo Text! This is Demo Text! This is Demo Text!<br>
This is Demo Text! This is Demo Text! This is Demo Text!<br>
</div>
<script>
function display() {
document.getElementById("myID").style.textOverflow = "ellipsis";
}
</script>
</body>
</html>코드 설명
- CSS 스타일:
#myID요소에는 파란색 테두리와 회색 배경이 적용되었으며, 너비는 200px로 고정되고overflow: hidden과white-space: nowrap이 설정되어 있습니다. - 버튼 클릭 이벤트: 버튼을 클릭하면
display()함수가 호출됩니다. - JavaScript 처리:
document.getElementById("myID").style.textOverflow = "ellipsis";구문이 실행되어, 요소의text-overflow값이visible에서ellipsis로 변경되고 화면에 말줄임표가 나타납니다.
이처럼 JavaScript를 이용하면 페이지 로드 후 사용자 상호작용에 따라 텍스트 오버플로 스타일을 유연하게 제어할 수 있으며, 카드 UI나 게시글 목록처럼 제한된 공간에 긴 텍스트를 표시해야 하는 상황에서 특히 유용합니다.