word-break
단어의 절단 여부와 방법
- CSS property
- used to specify how a word should be broken or split when reaching the end of a line
(단어가 행의 끝 지점을 지나칠 때 자를 것인지 여부)
- used to split/break long words and wrap them into the next line
(다시 말해 다음 행으로 넘어가는 긴 단어를 자를 것인지 여부)
/* 키워드 값 */
/* normal, break-all, keep-all, break-work */
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word;
* break-word는 최근 사용 중지시켰기 때문에 브라우저의 종류와 버전에 따라서 지원 상태가 다릅니다.
1. normal
- Words break according to their customary rules.
- soft wrap opportunities allowed for normal
※ 글 틀을 채우는 내용의 흐름에 따라서 줄 바꿈이 이루어지는 것이 soft wrap break이며, "pre, pre-line, no-wrap"과 같은 나눔 조절 요인에 의한 줄 바꿈이 이루어지는 것이 forced line break이다. 허용된 지점에서만 줄 나눔이 이루어지는 것을 soft wrap opportunity라고 부른다.
word-break: normal;
각 줄의 마지막에 한글이 올 때 줄 나눔 기
준을 “글자” 또는 “어절” 단위로 한다.
word-break: keep-all;
각 줄의 마지막에 한글이 올 때 줄 나눔
기준을 “글자” 또는 “어절” 단위로 한다.
2. break-all
- Breaking is allowed within “words.”
- used to break the word at any character to prevent overflow
- 문자 단위 단어 분철
3. keep-all
- Breaking is forbidden within “words.”
- 사전 기반 분철을 제외하고는 문자 단위 단어 분철 금지
- Chinese/Japanese/Korean (CJK) 문자는 분철하지 않음
- anywhere 값을 제외한 line-break 속성 설정 무시
※ The line-break CSS property sets how to break lines of Chinese, Japanese, or Korean (CJK) text when working with punctuation and symbols. [출처] line-break - CSS: Cascading Style Sheets | MDN (mozilla.org)
4. break-word
- used to break the word at arbitrary points to prevent overflow
- 음절을 고려하여 단어 분철
- CSS Text Module Level 3 spec에서 사용 중지
- 아래 구문과 동일한 결과
word-break: normal;
overflow-wrap: anywhere;
overflow-wrap
문자열 분할의 적용 방법
※ 2023.09.17: 심각한 오류 수정 및 내용 보충
- CSS property
- word-wrap 대체
- whether to insert line breaks within an otherwise unbreakable word to prevent text from overflowing its line box
- 행 바꿈(line break) 방법
/* Keyword values */
/* normal, break-word, anywhree */
overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;
1. normal
- overflow-wrap 속성의 기본 값
- 문자열을 기본적인 분할 규칙에 준하여 공백이나 하이픈과 같은 지점에서 분할
- 혹은 단어를 나누고 소프트 하이픈을 추가
※ 소프트 하이픈: 단어를 끊는 위치를 표시하거나 행의 끝 부분에 공간이 부족할 때 단어를 나누고 중간에 삽입하는 문장 부호
- 공백, 하이픈 같은 soft wrap opportunities가 존재할 경우, 그 지점에서 행의 폭을 초과하는 문자열을 분할한다.
2. anywhere
- 행 폭의 초과를 막기 위한 브라우저의 문자열(string) 임의 지점 분할 허용
- 공백, 하이픈, 혹은 다른 soft wrap opportunities가 없더라도 임의 지점에서 문자열 분할
- 소프트 하이픈 추가하지 않음 (No hyphenation character is inserted at the break point.)
- 문자열 분할을 위하여 최소 콘텐츠 고유 크기(min-content intrinsic size) 계산할 때, 단어 분할에 의한 soft wrap opportunities 인식
3. break-word
- 하나의 행을 여러 개의 행으로 분할하기 위한 적당한 분할 지점이 없을 때 적용
- 행의 폭을 초과하는 문자열을 무작위로 분할하여 다음 행으로 넘김
- 소프트 하이픈 추가하지 않음 (No hyphenation character is inserted at the break point.)
- 문자열 분할을 위하여 최소 콘텐츠 고유 크기(min-content intrinsic size) 계산할 때, 단어 분할에 의한 soft wrap opportunities 무시
line-break
Chinese, Japanese, Korean 줄 나눔
Mdn web docs의 line-break" 참고
- CSS property
- 구두점과 문장 부호를 적용한 Chinese, Japanese, Korean (CJK) 문자의 줄 바꿈 설정
/* Keyword values */
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;
1. auto
기본 값에 의한 나눔 규칙 적용
2. loose
일반적으로 뉴스 기와 같은 짧은 문장들에 사용하는 것으로 비제한적인 나눔 규칙 적용
3. normal
가장 보편적인 나눔 규칙을 적용하여 줄 바꿈
4. strict
가장 엄격한 나눔 규칙을 적용하여 줄 바꿈
5. anywhere
문장 부호, 공백, 단어 중간뿐만 아니라 word-break 속성 설정 값을 포함한 모든 줄 바꿈 금지 사항을 무시하는 soft wrap opportunity가 허용된다. 하이픈 설정 무시.
댓글