CSS实现文字竖向排版的简单方法,bootstrap4文字竖向排版代码:主要用到的CSS属性:writing-mode:vertical-lr;及writing-mode:tb-lr;/*IE浏览
CSS实现文字竖向排版的简单方法,bootstrap4文字竖向排版代码:
主要用到的CSS属性:writing-mode: vertical-lr;及writing-mode: tb-lr;/*IE浏览器*/,英文字符加上这句:word-wrap: break-word;/*英文的时候需要加上这句,自动换行*/
效果图:
代码如下:
<style>.text-vertical { margin: 0 auto; height: 140px; writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/ writing-mode: tb-lr;/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl;*/ word-wrap: break-word;/*英文的时候需要加上这句,自动换行*/}</style> <div class=\"text-vertical\">远看代码黑乎乎,上头密来下头疏。若把电脑倒过来,下头密来上头疏。</div> <div class=\"text-vertical\">www.df81.com</div>
本文内容由互联网用户自发贡献,该文观点仅代表作者本人,本站仅供展示。如发现本站有涉嫌抄袭侵权/违法违规的内容,请发送邮件至 97552693@qq.com 举报,一经查实,本站将立刻删除。