-webkit-line-clamp
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Want more browser support for this feature? Tell us why.
-webkit-line-clamp CSS ìì±ì ë¸ë¡ 컨í
ì´ëì ì½í
ì¸ ë¥¼ ì§ì í ì¤ ìë§í¼ì¼ë¡ ì íí©ëë¤.
display ìì±ì -webkit-box ëë -webkit-inline-boxë¡, ê·¸ë¦¬ê³ -webkit-box-orient ìì±ì verticalë¡ ì¤ì í ê²½ì°ìë§ ëìí©ëë¤.
-webkit-line-clampë§ ì¬ì©íë ê²½ì°, ë§ì¤ìíë ë
¸ì¶ëë ëì¹ ì½í
ì¸ ê° ì¨ê²¨ì§ì§ ìì¼ë¯ë¡ ëê° overflow ìì± ëí hiddenì¼ë¡ ì¤ì í´ì¼ í©ëë¤.
ìµì»¤ ììì ì ì©í ê²½ì° í ì¤í¸ì ëì´ ìëë¼ ì¤ììì ì리ë ê²½ì°ë ììµëë¤.
ì°¸ê³ :
-webkit-line-clampë ìë WebKitì´ êµ¬ííìì¼ë©° ëªëª 문ì ì ì ê°ì§ê³ ìì¼ë ë ê±°ì ì§ìì ìí´ íì¤í를 거쳤ìµëë¤. CSS Overflow Module Level 3 ëª
ì¸ì line-clampê° -webkit-line-clamp를 ëì²´í기 ìí´ ì ìë ìì±ì
ëë¤.
구문
/* í¤ìë ê° */
-webkit-line-clamp: none;
/* <integer> ê° */
-webkit-line-clamp: 3;
-webkit-line-clamp: 10;
/* ì ì ê° */
-webkit-line-clamp: inherit;
-webkit-line-clamp: initial;
-webkit-line-clamp: unset;
íì ì ì
| ì´ê¸°ê° | none |
|---|---|
| ì ì©ëì | Block containers except multi-column containers |
| ìì | no |
| ê³ì° ê° | as specified |
| Animation type | an integer |
íì 구문
line-clamp =
none |
[ <integer [1,â]> || <'block-ellipsis'> ] -webkit-legacy?
<integer> =
<number-token>
<block-ellipsis> =
no-ellipsis |
auto |
<string>
ìì
ë¬¸ë¨ ì르기
HTML
<p>
In this example the <code>-webkit-line-clamp</code> property is set to
<code>3</code>, which means the text is clamped after three lines. An ellipsis
will be shown at the point where the text is clamped.
</p>
CSS
p {
width: 300px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
ê²°ê³¼
ëª ì¸
| Specification |
|---|
| CSS Overflow Module Level 4 # propdef-line-clamp |