CSS3의 text-overflow 속성은 지정된 영역보다 길어서 화면에 표시되지 못하고 넘쳐버린 콘텐츠(오버플로된 텍스트)를 사용자에게 어떤 방식으로 알려줄지 결정하는 데 사용됩니다.
이 속성이 의도대로 동작하려면 요소에 white-space: nowrap과 overflow: hidden이 반드시 함께 설정되어 있어야 합니다. 이 조건이 갖춰지지 않으면 text-overflow는 아무런 효과가 없습니다.
text-overflow의 주요 값
- clip: 영역을 벗어난 텍스트를 그대로 잘라내어 표시하지 않습니다. 기본값입니다.
- ellipsis: 잘린 부분 대신 말줄임표(...)를 표시하여 뒤에 내용이 더 있다는 것을 사용자에게 알립니다.
예제
다음은 CSS3에서 텍스트 오버플로를 처리하는 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
white-space: nowrap;
width: 100px;
overflow: hidden;
border: 1px solid #3008c0;
margin: 10px;
padding: 10px;
}
.clip {
text-overflow: clip;
}
.ellipsis {
text-overflow: ellipsis;
}
</style>
</head>
<body>
<h1>Handling text overflow example</h1>
CLIP:
<div class="clip">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, beatae.
</div>
ELLIPSES:
<div class="ellipsis">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, beatae.
</div>
</body>
</html>위 예제에서는 두 개의 div 요소에 동일한 문장을 넣고, 하나에는 clip, 다른 하나에는 ellipsis 값을 적용했습니다. 두 요소 모두 너비가 100px로 제한되어 있고 white-space: nowrap으로 줄바꿈을 막았기 때문에 텍스트가 가로로 넘치게 됩니다.
실행 결과
위 코드를 실행하면 다음과 같은 출력 결과를 확인할 수 있습니다.
clip이 적용된 첫 번째 박스는 넘친 텍스트가 단순히 잘려서 보이는 반면, ellipsis가 적용된 두 번째 박스는 잘린 위치에 말줄임표(...)가 나타나 내용이 생략되었음을 직관적으로 알려줍니다. 실무에서는 게시판 제목이나 카드 UI처럼 공간이 제한적인 곳에서 주로 ellipsis 값을 활용합니다.