前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

CSS实现文字竖向排版的简单方法(css 文字竖向)

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>
<!-- 这首诗要转载,请注明来自:www.df81.com --> 
<div class="text-vertical">远看代码黑乎乎,上头密来下头疏。若把电脑倒过来,下头密来上头疏。</div>  
<div class="text-vertical">www.df81.com</div>

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言