align-content-block-break-overflow-010-ref.html (3474B)
1 <!DOCTYPE html> 2 <title>CSS Box Alignment: align-content fragmentation: simple block content</title> 3 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> 4 <link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block"> 5 6 <style title="Needed for automation; delete to review/debug"> 7 @import "/fonts/ahem.css"; 8 html { font: 10px/1 Ahem; max-width: 780px; } 9 </style> 10 11 <style> 12 .pager { 13 column-fill: auto; 14 column-width: 15em; 15 height: 5em; 16 } 17 .test { 18 height: 5em; 19 break-inside: avoid; 20 /* show bounds of test box without interfering with margin-collapsing */ 21 border-inline: solid black 1em; 22 } 23 .test:last-child { 24 height: 4em; 25 } 26 .large, .float { 27 height: 2.5em; 28 break-inside: avoid; 29 padding: 2px; /* using padding because of margin handling bugs 30 margin: 2px; 31 switch back once fixed */ 32 background: orange; 33 } 34 .float { 35 float: right; 36 } 37 .nobr { 38 break-inside: avoid; 39 } 40 41 /* readability */ 42 .pager { border: solid 2px gray; margin: 0.5em 0; } 43 .test { color: #8888; text-align: center; } 44 .label { color: black; font-weight: bold; } 45 </style> 46 47 <!-- 48 This test creates breaks in overflow: 49 * after some directly-contained text 50 * after a fixed-height block 51 * through some nested text 52 * after a block containing text 53 --> 54 55 <div class="pager"> 56 <div class="test"> 57 <span class="label">CENTER</span> 58 <br>LINE 2<br>LINE 3 59 </div> 60 <div class="test"> 61 <div class="large"></div> 62 </div> 63 <div class="test"> 64 <div class="large"></div> 65 LINE 4 66 </div> 67 <div class="test"> 68 <div class="nobr">LINE 5<br>LINE 6</div> 69 </div> 70 </div> 71 </div> 72 73 74 <div class="pager"> 75 <div class="test"> 76 <span class="label">END</span> 77 <br>LINE 2<br>LINE 3 78 </div> 79 <div class="test"> 80 <div class="large"></div> 81 </div> 82 <div class="test"> 83 <div class="large"></div> 84 LINE 4 85 </div> 86 <div class="test"> 87 <div class="nobr">LINE 5<br>LINE 6</div> 88 </div> 89 </div> 90 </div> 91 92 <div class="pager"> 93 <div class="test"> 94 <span class="label">BASELINE</span> 95 <br>LINE 2<br>LINE 3 96 </div> 97 <div class="test"> 98 <div class="large"></div> 99 </div> 100 <div class="test"> 101 <div class="large"></div> 102 LINE 4 103 </div> 104 <div class="test"> 105 <div class="nobr">LINE 5<br>LINE 6</div> 106 </div> 107 </div> 108 </div> 109 110 <div class="pager"> 111 <div class="test"> 112 <span class="label">LAST BASELINE</span> 113 <br>LINE 2<br>LINE 3 114 </div> 115 <div class="test"> 116 <div class="large"></div> 117 </div> 118 <div class="test"> 119 <div class="large"></div> 120 LINE 4 121 </div> 122 <div class="test"> 123 <div class="nobr">LINE 5<br>LINE 6</div> 124 </div> 125 </div> 126 </div> 127 128 <div class="pager"> 129 <div class="test"> 130 <span class="label">UNSAFE CENTER</span> 131 <br>LINE 2<br>LINE 3 132 </div> 133 <div class="test"> 134 <div class="large"></div> 135 </div> 136 <div class="test"> 137 <div class="large"></div> 138 LINE 4 139 </div> 140 <div class="test"> 141 <div class="nobr">LINE 5<br>LINE 6</div> 142 </div> 143 </div> 144 </div> 145 146 <div class="pager"> 147 <div class="test"> 148 <span class="label">UNSAFE END</span> 149 <br>LINE 2<br>LINE 3 150 </div> 151 <div class="test"> 152 <div class="large"></div> 153 </div> 154 <div class="test"> 155 <div class="large"></div> 156 LINE 4 157 </div> 158 <div class="test"> 159 <div class="nobr">LINE 5<br>LINE 6</div> 160 </div> 161 </div> 162 </div>