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.
기본값 : normal
상속여부 : O
애니효과 : X
CSS버전 : CSS3
JS구문 : object.style.wordBreak="break-all";
2.
IE5.5 이상 모든 브라우저 지원.
word-break 구문
word-break: 속성값;
[속성값]
normal
해당 언어 스크립트의 일상적인 기본 룰 따라 줄바꿈. 보통 단어 단위 줄바꿈 (기본값)
KCJ (X) : 분기점: 공백 (띄어쓰기, 하이픈'-')
KCJ (O) : 분기점: 음절
break-all
두 문자 어디서든 줄바꿈. (즉, 단어 중간에서도 줄바꿈)
KCJ (X) : 분기점: 음절
KCJ (O) : 분기점: 음절
keep-all
문자 묶음 사이에선 줄바꿈 안 됨. 단, 하이픈 뒤에선 가능.
KCJ (X) : 분기점: 공백 (띄어쓰기, 하이픈'-')
KCJ (O) : 분기점: 공백 (띄어쓰기, 하이픈'-', 그외기호)
initial
이 속성을 그것의 기본값으로 설정.
inherit
부모 요소에게서 속성값을 상속.
예제: https://codepen.io/witblog/full/gRrdPR/
상세: https://wit.nts-corp.com/2017/07/25/4675
