网站首页 网站建设 IT知识 IT知识教程 使用CSS实现文字的竖排的简单方法

使用CSS实现文字的竖排的简单方法

2021-05-08 21:11:12

样式表的文字处理属性中有两个重要的属性:writing-mode和text-align。让我们先看看它们的用法:

  1. writing-mode(设置对象书写方向)

  语法:writing-mode : lr-tb、tb-rl
  参数:lr-tb:从左向右,从上往下  tb-rl:从上往下,从右向左
  示例:

CSS Code复制内容到剪贴板
  • div{writing-mode:tb-rl;}
  •   2. text-align(设置对象中文本的对齐方式)

      语法:text-align : left、right、center、justify
      参数:left:左对齐  right:右对齐  center:居中  justify:两端对齐
      示例:

    CSS Code复制内容到剪贴板
  • div{text-align:center;}
  • 而通常普通的排版思路:对文字对象宽度设置只能排下一个文字的宽度距离,让文字一行排不下两个文字使其文字自动换行,就形成了竖立排版需求。

    CSS Code复制内容到剪贴板
  • <!DOCTYPEhtml>
  • <html>
  • <head>
  • <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
  • <title>竖列排版实例在线演示www.jb51.net</title>
  • <style>
  • body{text-align:center}
  • .shuli{margin:0auto;width:20px;line-height:24px;border:1pxsolid#333}
  • </style>
  • </head>
  • <body>
  • <divclass="shuli">我是竖列排版</div>
  • </body>
  • </html>
  • Demo

    声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。 如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    以上产品还未完全满足我的所有需求,在下方提交我的专属需求
    我的专属需求:
    *手机号:
    *验证码:
    img
    咨询报价
    现在咨询
    img

    在线咨询

    建站在线咨询

    img

    微信咨询

    扫一扫添加
    动力姐姐微信

    img
    img

    TOP