HTML DOM의 textOverflow 속성은 HTML 문서에서 텍스트가 요소 컨테이너의 범위를 벗어나 흘러넘칠 때 어떻게 처리할지를 설정하거나 현재 값을 반환하는 속성입니다. 주로 긴 텍스트를 한 줄로 표시하면서 넘치는 부분을 말줄임표(...)로 처리하는 데 활용됩니다.
문법(Syntax)
textOverflow 속성의 기본 문법은 다음과 같습니다.
값 가져오기
object.style.textOverflow
값 설정하기
object.style.textOverflow = "value"
속성 값
value에 들어갈 수 있는 값은 아래와 같습니다.
| 값 | 설명 |
|---|---|
| inherit | 부모 요소로부터 이 속성 값을 상속받습니다. |
| initial | 이 속성 값을 기본값으로 초기화합니다. |
| clip | 컨테이너를 벗어나는 텍스트를 잘라내어 표시하지 않습니다. |
| ellipsis | 잘려나간 텍스트를 줄임표("...")로 표시합니다. |
| string | 사용자가 지정한 문자열을 잘려나간 텍스트 대신 표시합니다. |
예제(Example)
textOverflow 속성의 실제 동작을 확인할 수 있는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
}
p {
margin: 1.5rem auto;
border: 3px solid #fff;
width: 400px;
white-space: nowrap;
overflow: hidden;
text-overflow: visible;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>DOM Style textOverflow 속성 예제</h1>
<p>
첫 번째 단락입니다. 더미 텍스트가 들어갑니다. 첫 번째 단락입니다. 더미 텍스트가 들어갑니다.
첫 번째 단락입니다. 더미 텍스트가 들어갑니다. 첫 번째 단락입니다. 더미 텍스트가 들어갑니다.
첫 번째 단락입니다. 더미 텍스트가 들어갑니다. 첫 번째 단락입니다. 더미 텍스트가 들어갑니다.
</p>
<button onclick="add()" class="btn">textOverflow 변경하기</button>
<script>
function add() {
document.querySelector('p').style.textOverflow = "ellipsis";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
화면에서 "textOverflow 변경하기" 버튼을 클릭하면, 넘쳐 흐르던 단락 텍스트의 표시 방식이 변경되고 잘려나간 부분이 줄임표(...)로 대체되는 것을 확인할 수 있습니다.
