text-wrap-balance-top-to-bottom.html (972B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-text-4/#text-wrap"> 3 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 4 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 #container { 9 height: 15ch; 10 writing-mode: vertical-rl; 11 } 12 .balance { 13 text-wrap: balance; 14 } 15 </style> 16 <div id="container"></div> 17 <script> 18 const container = document.getElementById('container'); 19 for (const text of [ 20 '平衡应该', 21 '平衡文本换行不应改变行数', 22 '平衡文本换行不应改变该文本段落的行数', 23 ]) { 24 const normal = document.createElement('div'); 25 const balance = document.createElement('div'); 26 normal.textContent = text; 27 balance.textContent = text; 28 balance.classList.add('balance'); 29 container.appendChild(normal); 30 container.appendChild(balance); 31 test(() => { 32 assert_equals(normal.offsetWidth, balance.offsetWidth); 33 }); 34 } 35 </script>