首页 > 软件开发 > HTML >

HTML网页怎么设置竖排文字

来源:互联网 2023-03-16 19:16:30 236

在网页开过的时候,经常会遇到这么一个需求:将文字竖排,那么该怎么设置呢?下面小编就将操作方法演示给大家,供大家参考!9MJ办公区 - 实用经验教程分享!

HTML网页怎么设置竖排文字9MJ办公区 - 实用经验教程分享!

工具/原料

  • 浏览器:谷歌浏览器
  • 网页开发工具:HBuilder X

方法/步骤

  • 1

    打开网页开工具,新建一个HTML文件9MJ办公区 - 实用经验教程分享!

    HTML网页怎么设置竖排文字9MJ办公区 - 实用经验教程分享!

  • 2

    实现方法一:使用br>换行标签9MJ办公区 - 实用经验教程分享!

    代码:如图所示9MJ办公区 - 实用经验教程分享!

    HTML网页怎么设置竖排文字9MJ办公区 - 实用经验教程分享!

  • 3

    实现方法二:设置文字外框DIV的宽度,让文本自动换行!9MJ办公区 - 实用经验教程分享!

    代码:如图所示9MJ办公区 - 实用经验教程分享!

    HTML网页怎么设置竖排文字9MJ办公区 - 实用经验教程分享!

  • 3此文章未经许可获取自百度经验
  • 4

    实现方法三:设置CSS属性样式writing-mode:tb-rl来实现9MJ办公区 - 实用经验教程分享!

    代码:如图所示9MJ办公区 - 实用经验教程分享!

    HTML网页怎么设置竖排文字9MJ办公区 - 实用经验教程分享!

  • 5

    打开浏览器预览竖排文字效果9MJ办公区 - 实用经验教程分享!

    HTML网页怎么设置竖排文字9MJ办公区 - 实用经验教程分享!

  • 方法总结:

  • 1

    1、新建一个HTML文件9MJ办公区 - 实用经验教程分享!

    2、9MJ办公区 - 实用经验教程分享!

    方法一:使用br>换行标签9MJ办公区 - 实用经验教程分享!

    方法二:设置文字外框DIV的宽度,让文本自动换行9MJ办公区 - 实用经验教程分享!

    方法三:设置CSS属性样式writing-mode:tb-rl9MJ办公区 - 实用经验教程分享!

    3、打开浏览器预览效果9MJ办公区 - 实用经验教程分享!

  • 注意事项

    • tips1:网页开发工具,没有做限制,可以选择自己喜欢的开发工具来开发!
    • tips2:本教程提供了三种设置方法,大家可根据实际情况,来选择适合的方法!

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!9MJ办公区 - 实用经验教程分享!


    标签: HTMLCSS网站网页

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码