网站首页 网站建设 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邮箱联系删除。

    相关文章

    VC中实现文字竖排的简单方法(推荐)
    好多人都觉得在VC中实现文字竖排是一件很难的事情，其实可以使用“躺”着的字体很方便的实现文字竖排。Windows中有一些字体是“躺”着的，例如：@Fixedsy
    4种CSS文字竖排方法
    　　有时候，我们需要对网页某个区域的文字竖排，竖向排列，横向的当然大家都见惯了，对于竖排，一时间找不到思路了，呵呵，其实和横排一样简单，下面介绍4种方法来实现C
    word文档怎么将文字竖排
    word文档将文字竖排的方法：　　1、打开word；　　2、点击菜单栏的插入；　　3、点击文本框；　　4、选择绘制竖排文本框；　　5、输入文字便是竖排文字了。　
    word文档怎么把字竖排
    word文档把字竖排的方法：　　1、打开word。　　2、点击菜单栏的插入。　　3、点击文本框。　　4、选择绘制竖排文本框。　　5、输入文字便是竖排文字了。　　
    word文字怎么竖着打
    word文字竖着打的方法：　　1、打开word。　　2、点击菜单栏的插入。　　3、点击文本框。　　4、选择绘制竖排文本框。　　5、输入文字便是竖排文字了。　　M

    最新文章

    载入进度条 效果
    邮件发送简单例子-html文件
    详解关于html，css，js三者的加载顺序问题
    限制复选框的最大可选数
    随鼠标上下滚动的jquery代码

    hot 热门文章

    python模拟登陆Tom邮箱示例分享
    苹果11抖音怎么投屏? iphone将投影投屏到电视的技巧
    蚂蚁森林节气签怎么领
    华为mate30怎么更新系统？华为mate30更新手机系统教程
    小米电视怎么下载斗鱼

    猜你喜欢

    JavaScript 命名空间 使用介绍
    javascript ���名规则 变量命名规则
    javascript 秒表计时器实现代码
    Javascript 面向对象之重载
    JavaScript 面向对象之命名空间
    以上产品还未完全满足我的所有需求，在下方提交我的专属需求
    我的专属需求：
    *手机号：
    *验证码：
    img
    咨询报价
    现在咨询
    img

    在线咨询

    建站在线咨询
    img

    获取方案

    获取建站报价/方案

    我们联系您img

    img

    微信咨询

    扫一扫添加
    动力姐姐微信
    img
    img

    TOP

    我们尽快联系您