css怎么让文字竖的排版

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:从上往下,从右向左。

示例:

nbsp;html>          test            .one {      margin: 0 auto;      height: 140px;      writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/  }          
好好学习,天天向上。福如东海,寿比南山。 
    

登录后复制

效果如下:

1112.10.png

或者通过:

nbsp;html>          test            .one {      margin: 0 auto;      height: 140px;      writing-mode: vertical-rl;    }          
好好学习,天天向上。福如东海,寿比南山。 
    

登录后复制

或者:

nbsp;html>          test            .one {      margin: 0 auto;      height: 140px;      writing-mode: tb-rl;/*从左向右 从右向左是 writing-mode: vertical-rl;*/      }          
好好学习,天天向上。福如东海,寿比南山。 
    

登录后复制

输出结果:

1112.12.png

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

以上就是css怎么让文字竖的排版的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2870708.html

(0)
上一篇 2025年3月10日 18:26:57
下一篇 2025年3月6日 15:26:57

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • css怎样设置椭圆

    css设置椭圆的方法:1、给元素添加“{width:宽度值;height:高度值;}”样式,将元素设置为矩形;2、给矩形元素添加“{border-radius:100%;}”圆角样式将其设置为椭圆即可。 本教程操作环境:windows7系统…

    2025年3月10日 编程技术
    200
  • 怎样用css设置div悬浮

    在css中,可以使用position属性设置绝对定位来实现div悬浮,只需要给div元素添加“{position:absolute;top:距离页面顶部距离;left:距离页面左侧距离;}”样式即可。 本教程操作环境:windows7系统、…

    2025年3月10日 编程技术
    200
  • css如何让div悬浮于另一个div上

    让div悬浮于另一个div上的方法:1、给两个div元素添加“position:absolute”绝对定位样式;2、给其中一个div元素添加“{top:距离页面顶部距离;left:距离页面左侧距离;}”样式使其浮动在另一个div元素上即可。…

    2025年3月10日 编程技术
    200
  • css怎样实现字母不到一行就换行

    css字母不到一行就换行的方法:1、给元素添加“word-break:break-word;”样式,使其以单词为单位换行;2、给元素添加“word-break:break-all;”样式,使其以字母为单位换行。 本教程操作环境:window…

    2025年3月10日
    200
  • css中怎么调整a标签之间的间距

    调整方法:1、给a标签添加“margin:上边距 右边距 下边距 左边距;”样式;2、给a标签添加“margin-left:左边距;”、“margin-top:上边距;”、“margin-right:右边距;”等样式设置不同方向的外边距。 …

    2025年3月10日
    200
  • css怎样设置单词内字母的间距

    在css中,可以使用“letter-spacing”属性来设置单词内字母的间距,该属性的作用就是增加或减少字符间的间距,只需要给文本元素添加“{letter-spacing:间距值;}”样式即可。 本教程操作环境:windows7系统、CS…

    2025年3月10日
    200
  • css如何设置鼠标放上图片出现文字

    css设置鼠标放上图片出现文字的方法:1、给文字元素添加“display:none;”样式使其隐藏;2、使用“父元素:hover 文字元素{display:block;}”语句实现鼠标放在图片上显示文字的效果。 本教程操作环境:window…

    2025年3月10日
    200
  • 19个CSS唯美的边框,让你的项目大放异彩!

    本篇文章分享19个css唯美的边框,可增加我们的项目”亮”点,让你的项目大放异彩,让用户爱起来!希望对大家有所帮助,快来收藏吧!! 渐变边框动画 事例地址:https://codepen.io/mike-schult…

    2025年3月10日 编程技术
    200
  • css文字水平垂直居中怎么设置

    css设置文字水平垂直居中的方法:1、给文字元素添加“{align-items:center}”样式使其水平方向居中;2、给文字元素添加“{justify-content:center}”样式使其垂直方向居中即可。 本教程操作环境:wind…

    2025年3月10日 编程技术
    200
  • css怎样设置button为直角

    在css中,可以利用“border-radius”属性设置button为直角,只需要给button元素添加“{border-radius:0%;}”或者“{border-radius:0px;}”样式即可。 本教程操作环境:windows7…

    2025年3月10日
    200

发表回复

登录后才能评论