JavaScript에서는 wordBreak 속성을 사용하여 비 CJK 스크립트 텍스트의 줄 바꿈 규칙을 설정할 수 있습니다. 여기서 CJK란 중국어(C), 일본어(J), 한국어(K)를 의미하며, 이 세 언어를 제외한 나머지 스크립트가 줄 바꿈 규칙의 적용 대상이 됩니다.
wordBreak 속성은 단어가 길어서 요소의 너비를 초과할 때 어떻게 처리할지 결정하는 데 유용합니다. 예를 들어 break-all 값을 사용하면 단어 중간이라도 강제로 줄이 바뀌어 텍스트가 컨테이너 밖으로 벗어나지 않습니다.
예제
아래 코드를 직접 실행해 보면 wordBreak 속성을 구현하는 방법을 확인할 수 있습니다. 버튼을 클릭하면 박스 안의 텍스트에 줄 바꿈 규칙이 적용됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
width: 150px;
height: 120px;
background-color: lightblue;
border: 1px solid black;
}
</style>
</head>
<body>
<button onclick = "display()">Set</button>
<div id = "box">
This is Demo Text.This is Demo Text.This is Demo Text.This is Demo Text.This is Demo Text.This is Demo Text.
</div>
<script>
function display() {
document.getElementById("box").style.wordBreak = "break-all";
}
</script>
</body>
</html>코드 설명
위 예제에서는 150px × 120px 크기의 박스(#box)에 긴 영문 텍스트를 담고 있습니다. Set 버튼을 클릭하면 display() 함수가 실행되어 해당 요소의 style.wordBreak 값이 break-all로 변경됩니다. 그 결과, 공백 없이 이어진 긴 텍스트라도 박스 경계를 기준으로 강제로 줄 바꿈되어 내용이 잘리거나 넘치지 않고 화면에 표시됩니다.