CSS의 text-overflow 속성은 요소의 크기를 벗어나 화면에 표시되지 않는 콘텐츠(오버플로된 콘텐츠)를 사용자에게 어떤 방식으로 알릴지 결정하는 데 사용됩니다.
주요 값 정리
- clip: 넘치는 텍스트를 그대로 잘라냅니다. 잘린 지점에는 아무런 표시도 남지 않습니다.
- ellipsis: 넘치는 텍스트를 잘라낸 뒤, 잘린 위치에 말줄임표(...)를 표시합니다.
text-overflow 속성이 정상적으로 동작하려면 반드시 overflow: hidden;과 white-space: nowrap;이 함께 설정되어 있어야 한다는 점을 기억하세요.
예제
다음 코드를 실행하면 CSS에서 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>출력 결과
위 예제를 실행하면 첫 번째 문단(clip)은 넘치는 텍스트가 잘린 채로 표시되고, 두 번째 문단(ellipsis)은 잘린 위치에 말줄임표(...)가 나타나는 것을 확인할 수 있습니다.
