line-break
Baseline
Widely available
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since â¨2020ë 7ìâ©.
CSS line-break ìì±ì íì¤ì¼(CJK) 3ê°êµì´ì í
ì¤í¸ ì¤ì ì´ëì ë°ê¿ì§ ì§ì í©ëë¤.
/* í¤ìë ê° */
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;
/* ì ì ê° */
line-break: inherit;
line-break: initial;
line-break: unset;
구문
>ê°
auto-
기본 ì¤ ë°ê¿ ê·ì¹ì ì¬ì©í©ëë¤.
loose-
ê°ì¥ ìì ë¡ì´ ì¤ ë°ê¿ ê·ì¹ì ì¬ì©í©ëë¤. ë³´íµ ì 문 ë± ì§§ì ì¤ìì ì¬ì©í©ëë¤.
normal-
ê°ì¥ íí ì¤ ë°ê¿ ê·ì¹ì ì¬ì©í©ëë¤.
strict-
ê°ì¥ ì격í ì¤ ë°ê¿ ê·ì¹ì ì¬ì©í©ëë¤.
anywhere-
모ë íì´í¬ê·¸ëí¼ ê¸ì ë¨ì 주ììì ì¤ì ë°ê¿ ì ììµëë¤. ì¤ ë°ê¿ ìì¹ë 모ë ë¬¸ì¥ ë¶í¸, 공백, ë¨ì´ ì¤ê°ì í¬í¨íë©° GL, WJ, ZWJ 문ì í´ëì¤ê° ëíë´ë ì¤ ë°ê¿ ì í ë°
word-breakê° ì구íë ê·ì¹ 모ë 무ìí ì ììµëë¤. ë¶ìíë ì¬ì©íì§ ììµëë¤.
íì ì ì
| ì´ê¸°ê° | auto |
|---|---|
| ì ì©ëì | all elements |
| ìì | yes |
| ê³ì° ê° | as specified |
| Animation type | discrete |
íì 구문
line-break =
auto |
loose |
normal |
strict |
anywhere
ìì
>ì¤ ë°ê¿ ì§ì í기
ì¤ ë°ê¿ì´ "ã ", "ã", "ã"ì 주ììì ì´ë»ê² ë°ìíëì§ ì´í´ë³´ì¸ì.
HTML
<div lang="ja">
<p class="wrapbox auto">
auto:<br />ããã¯æ¹ã®ã»ã¨ãã§æ¨ã
ãè¼ãã¦ããã<br />ãã®æ¯è²ã«ãç¾ãããªãã¨æããã¤ã¶ãããã
</p>
<p class="wrapbox loose">
loose:<br />ããã¯æ¹ã®ã»ã¨ãã§æ¨ã
ãè¼ãã¦ããã<br />ãã®æ¯è²ã«ãç¾ãããªãã¨æããã¤ã¶ãããã
</p>
<p class="wrapbox normal">
normal:<br />ããã¯æ¹ã®ã»ã¨ãã§æ¨ã
ãè¼ãã¦ããã<br />ãã®æ¯è²ã«ãç¾ãããªãã¨æããã¤ã¶ãããã
</p>
<p class="wrapbox strict">
strict:<br />ããã¯æ¹ã®ã»ã¨ãã§æ¨ã
ãè¼ãã¦ããã<br />ãã®æ¯è²ã«ãç¾ãããªãã¨æããã¤ã¶ãããã
</p>
<p class="wrapbox anywhere">
anywhere:<br />ããã¯æ¹ã®ã»ã¨ãã§æ¨ã
ãè¼ãã¦ããã<br />ãã®æ¯è²ã«ãç¾ãããªãã¨æããã¤ã¶ãããã
</p>
</div>
CSS
.wrapbox {
width: 10em;
margin: 0.5em;
white-space: normal;
vertical-align: top;
display: inline-block;
}
.auto {
line-break: auto;
}
.loose {
line-break: loose;
}
.normal {
line-break: normal;
}
.strict {
line-break: strict;
}
.anywhere {
line-break: anywhere;
}
ê²°ê³¼
ëª ì¸
| Specification |
|---|
| CSS Text Module Level 3 > # line-break-property > |