목차
- word-break 예제 - 한중일 외의 언어 줄바꿈 규칙
- word-break 정의
- word-break 구문
- word-break 관련 주소
word-break 예제 - 한중일 외의 언어 줄바꿈 규칙
<style>
p.hz1 {
width: 140px;
padding:10px;
border: 1px dotted #000000;
word-break: keep-all; // 문자 사이에선 줄바꿈 처리 안 함. 단, 하이픈 뒤에서는 가능.
}
p.hz2 {
width: 140px;
padding:10px;
border: 1px dotted #000000;
word-break: break-all; // 무조건 줄바꿈 시킴
}
</style>
<p class="hz1">홈짱닷컴 (Homzzang.com) - HTML CSS JS JQ PHP SQL BS.</p>
<p class="hz2">홈짱닷컴 (Homzzang.com) - HTML CSS JS JQ PHP SQL BS.</p>
결과보기
word-break 정의
KCJ가 아닌 스크립트의 줄바꿈 방법 지정.
※ KCJ 스크립트 : 한중일 (Korean, Chinese, Japan) 스크립트
1. cf.
2.
- 기본값 : normal
- 상속여부 : O
- 애니효과 : X
- CSS버전 : CSS3
- JS구문 : object.style.wordBreak="break-all";
3.
주요 최신 브라우저 모두 지원.
4. MDN word-break 예제 보기
https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
word-break 구문
selector {word-break: 속성값;}
[속성값]
normal
해당 언어 스크립트의 일상적인 기본 룰 따라 줄바꿈. 보통 단어 단위 줄바꿈 (기본값)
- KCJ (X) 경우 분기점: 공백 (띄어쓰기, 하이픈'-')
- KCJ (O) 경우 분기점: 음절
break-all
글자기준 줄바꿈. (= 두 문자 어디서든 단어 중간에서도 줄바꿈) ★★★
- KCJ (X) 경우 분기점: 음절
- KCJ (O) 경우 분기점: 음절
- word-wrap: break-word; 속성과 주로 함께 사용.
keep-all
단어기준 줄바꿈. (= 문자묶음 사이에선 줄바꿈 안 됨. 단, 하이픈 뒤에선 가능.)
- KCJ (X) 경우 분기점: 공백 (띄어쓰기, 하이픈'-')
- KCJ (O) 경우 분기점: 공백 (띄어쓰기, 하이픈'-', 그외기호)
break-word
overflow 방지 위해 임의의 지점에서 단어 깨기 허용.
initial
이 속성의 기본값으로 설정.
inherit
부모요소 속성값 상속.
word-break 관련 주소
예제: https://codepen.io/witblog/full/gRrdPR/
상세: https://wit.nts-corp.com/2017/07/25/4675
