https://codepen.io/Chokcoco/pen/BaRRmgx <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>古文竖向排版</title> <style type="text/css"> @import url("https://fonts.googleapis.com/css2?family=Long+Cang&display=swap"); html, body { width: 100%; height: 100%; display: flex; font-family: "Long Cang", cursive; } .g-wrap h2 { font-size: 42px; padding: 0 10px; } .g-wrap p { font-size: 28px; line-height: 2; } .g-wrap { margin: auto; background: #ff000080; align-self: flex-start; } .pt { padding-top: 100px; } .ps { -webkit-padding-before: 100px; padding-block-start: 100px; } .rl { -ms-writing-mode: tb-rl; writing-mode: vertical-rl; } </style> </head> <body> <div class="g-wrap pt"> <h2>凉州词</h2> <p>葡萄美酒夜光杯,</p> <p>欲饮琵琶马上催。</p> <p>醉卧沙场君莫笑,</p> <p>古来征战几人回。</p> </div> <div class="g-wrap pt rl"> <h2>凉州词</h2> <p>葡萄美酒夜光杯,</p> <p>欲饮琵琶马上催。</p> <p>醉卧沙场君莫笑,</p> <p>古来征战几人回。</p> </div> <div class="g-wrap ps"> <h2>凉州词</h2> <p>葡萄美酒夜光杯,</p> <p>欲饮琵琶马上催。</p> <p>醉卧沙场君莫笑,</p> <p>古来征战几人回。</p> </div> <div class="g-wrap ps rl"> <h2>凉州词</h2> <p>葡萄美酒夜光杯,</p> <p>欲饮琵琶马上催。</p> <p>醉卧沙场君莫笑,</p> <p>古来征战几人回。</p> </div> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 古文竖向排版 喜欢 (2)or分享 (0)
