text-overflow 속성이란?
CSS의 text-overflow 속성은 요소 안에서 표시되지 못하고 넘쳐버린(오버플로된) 텍스트를 사용자에게 어떤 방식으로 알려줄지 결정하는 속성입니다. 이 속성은 단독으로는 동작하지 않으며, 일반적으로 overflow: hidden;(넘친 내용 숨기기)과 white-space: nowrap;(줄바꿈 방지) 속성과 함께 사용해야 합니다.
주요 값
- clip: 넘친 텍스트를 요소의 경계에서 그대로 잘라냅니다. 별도의 표시가 없기 때문에 뒤에 내용이 더 있는지 사용자가 알기 어렵습니다.
- ellipsis: 잘린 텍스트 끝에 말줄임표(...)를 표시하여 뒤에 내용이 더 있다는 사실을 직관적으로 알려줍니다.
예제
다음은 text-overflow 속성의 두 가지 값을 비교해 보는 예제입니다.
<html>
<head>
<style>
p.text1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.text2 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<b>원본 텍스트:</b>
<p>Tutorials Point originated from the idea that there exists a class of
readers who respond better to online content and prefer to learn new skills at
their own pace from the comforts of their drawing rooms.</p>
<b>text-overflow: clip:</b>
<p class = "text1">Tutorials Point originated from the idea that there exists
a class of readers who respond better to online content and prefer to learn
new skills at their own pace from the comforts of their drawing rooms.</p>
<b>text-overflow: ellipsis</b>
<p class = "text2">Tutorials Point originated from the idea that there exists
a class of readers who respond better to online content and prefer to learn
new skills at their own pace from the comforts of their drawing rooms.</p>
</body>
</html>실행 결과
위 코드를 실행하면 원본 텍스트와 함께 두 가지 결과를 확인할 수 있습니다. text-overflow: clip이 적용된 첫 번째 문단은 텍스트가 박스 경계에서 잘려 나가며, text-overflow: ellipsis가 적용된 두 번째 문단은 잘린 자리에 말줄임표(...)가 표시되어 뒤에 내용이 더 있음을 한눈에 알 수 있습니다.
