有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

css 文字竖排(CSS实现文字竖向排版)实现方式

代码编程 炮渣日记 4周前 (11-11) 22次浏览 已收录 0个评论 扫描二维码

CSS实现文字竖向排版的简单方法,bootstrap4文字竖向排版代码:

主要用到的CSS属性:writing-mode: vertical-lr;及writing-mode: tb-lr;/*IE浏览器*/,英文字符加上这句:word-wrap: break-word;/*英文的时候需要加上这句,自动换行*/

代码如下:

<style>
.text-vertical {
    margin0 auto;
    height140px;
    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>
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址