css怎么让文字竖的排版

WBOY
发布: 2021-11-12 15:10:26
原创
28166 人浏览过

css中可用writing-mode属性让文字竖着排版,只需要给文字元素添加“writing-mode:vertical-lr;”、“writing-mode:vertical-rl;”或“writing-mode:tb-rl”样式即可。

css怎么让文字竖的排版

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

css让文字竖的排版的方法:

有时候网页中的文字因为特别要求不能横向显示,这时候所需要的就是让文字来竖排显示,那么,网页中如何让文字竖排显示呢?接下来本篇文章将介绍css实现文字竖排显示的方法,希望对大家有所帮助。

使用writing-mode属性

writing-mode 属性定义了文本在水平或垂直方向上如何排布。

语法:

writing-mode:vertical-rl | vertical-lr | lr-tb | tb-rl
登录后复制

参数:

  • vertical-rl:垂直方向自右而左的书写方式。即 top-bottom-right-left

  • vertical-lr:垂直方向内内容从上到下,水平方向从左到右

  • lr-tb:从左向右,从上往下;

  • tb-rl:从上往下,从右向左。

示例:

   test  
好好学习,天天向上。 福如东海,寿比南山。
登录后复制

效果如下:

1112.10.png

或者通过:

   test  
好好学习,天天向上。 福如东海,寿比南山。
登录后复制

或者:

   test  
好好学习,天天向上。 福如东海,寿比南山。
登录后复制

输出结果:

1112.12.png

更多编程相关知识,请访问:编程视频!!

以上是css怎么让文字竖的排版的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
css
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!