orphans
æéå¯ç¨
æ¤ç¹æ§ä¸å±äºåºçº¿ï¼å 为å®å°æªå¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æã
Want more browser support for this feature? Tell us why.
CSS 屿§ orphans ç¨äºè®¾ç½®åºå容å¨ä¸ï¼å¨é¡µé¢ãåºåæåçåºé¨å¿
é¡»æ¾ç¤ºçæå°è¡æ°ã
卿çå¦ä¸ï¼å¤è¡æçæ¯æ®µè½ç第ä¸è¡åç¬åºç°å¨é¡µé¢åºé¨ï¼æ®µè½çå ¶ä½é¨åå»¶ç»å°ä¸ä¸é¡µï¼ã
è¯æ³
css
/* <integer> å¼ */
orphans: 2;
orphans: 3;
/* å
¨å±å¼ */
orphans: inherit;
orphans: initial;
orphans: revert;
orphans: revert-layer;
orphans: unset;
å¼
<integer>-
å¨åçåæ®µæå¼ä¹åï¼æ®µè½åºé¨æå 许åç¬åå¨çæå°è¡æ°ã该å¼å¿ é¡»ä¸ºæ£æ°ã
å½¢å¼å®ä¹
| åå§å¼ | 2 |
|---|---|
| éç¨å ç´ | åºå容å¨å ç´ |
| æ¯å¦æ¯ç»§æ¿å±æ§ | æ¯ |
| 计ç®å¼ | as specified |
| å¨ç»ç±»å | æè®¡ç®å¼çç±»å |
å½¢å¼è¯æ³
orphans =
<integer [1,â]>
<integer> =
<number-token>
示ä¾
>设置æå°å¤è¡æ°ä¸ºä¸è¡
HTML
html
<div>
<p>è¿æ¯ç¬¬ä¸æ®µæåï¼å
å«ä¸äºå
容ã</p>
<p>è¿æ¯ç¬¬äºæ®µæåï¼å
å«çå
容æ¯ç¬¬ä¸æ®µæ´å¤ãå®ç¨æ¥æ¼ç¤ºå¤è¡çå¤çæ¹å¼ã</p>
<p>è¿æ¯ç¬¬ä¸æ®µæåãå®çå
容æ¯ç¬¬ä¸æ®µç¨å¾®å¤ä¸äºã</p>
</div>
CSS
css
div {
background-color: #8cffa0;
height: 150px;
columns: 3;
orphans: 3;
}
p {
background-color: #8ca0ff;
}
p:first-child {
margin-top: 0;
}
ç»æ
è§è
| è§è |
|---|
| CSS Fragmentation Module Level 3 > # widows-orphans > |