首页 > 软件开发 > HTML >

HTML网页怎么设置竖排文字

来源:互联网 2023-03-16 19:16:30 版权归原作者所有,如有侵权,请联系我们

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

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

工具/原料

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

方法/步骤

  • 1

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

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

  • 2

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

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

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

  • 3

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

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

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

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

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

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

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

  • 5

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

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

  • 方法总结:

  • 1

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

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

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

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

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

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

  • 注意事项

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

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


    标签: HTMLCSS网站网页

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