? word-break / word-wrap / white-space
white-space:normal | nowrap | pre | pre-wrap| pre-line | break-spaces; MDN, W3org
overflow: visible | hidden | scroll | auto; MDN
text-overflow: clip | ellipsis | "-" | "" ; MDN,
hyphens : none | manual | auto ; MDN, W3org
word-break : normal | break-all | keep-all; MDN, W3org
overflow-wrap (word-wrap) : normal | break-word | anywhere; MDN, W3org
the difference between “word-break: break-all” vs. “word-wrap: break-word”
word-break: break-all is for requiring a particular behaviour with CJK (Chinese, Japanese, and Korean) text, whereas word-wrap: break-word is the more general, non-CJK-aware, behaviour.
-------------------
word-break : normal | break-all | keep-all;
The word-break CSS property is used to specify whether to break lines within words.
- normal: Use the default line break rule.
- break-all: Word breaks may be inserted between any character for non-CJK (Chinese/Japanese/Korean) text.
- keep-all: Don't allow word breaks for CJK text. Non-CJK text behavior is the same as for normal.
developer.mozilla.org/en-US/docs/Web/CSS/word-break
www.w3.org/TR/css-text-3/#word-break-property
in some styles of CJK(Chinese, Japanese, Korean) typesetting, English words are allowed to break between any two letters, rather than only at spaces or hyphenation points; this can be enabled with word-break:break-all.
As another example, Korean has two styles of line-breaking: between any two Korean syllables (word-break: normal) or, like English, mainly at spaces (word-break: keep-all).
normal : Words break according to their customary rules, as described above. Korean, which commonly exhibits two different behaviors, allows breaks between any two consecutive Hangul/Hanja.
break-all : Breaking is allowed within words.
keep-all : useful for mixed-script text where CJK snippets are mixed into another language.
------------------
overflow-wrap (word-wrap) : normal | break-word | anywhere;
word-wrap has been renamed to overflow-wrap probably to avoid this confusion.
The overflow-wrap property is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box.
Possible values:
-
normal: Indicates that lines may only break at normal word break points.
-
break-word: Indicates that normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.
- anywhere :
developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
www.w3.org/TR/css-text-3/#overflow-wrap-property
----------------------
❓ ❓
on Tistory
a browser considers <span> a word?
command + shift + v : eiditor replaces the spaces with ' ' - check again.
compare how it works under <p> and <span> !
under <p> and <span>, why word-break property works different? - check again. especially with ' '
so far, it seems to that when a space is replaced ' ' on tistory editor, a browser considers this a single word.