温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

css文字怎么竖排显示

发布时间:2022-01-21 11:11:20 来源:亿速云 阅读:943 作者:iii 栏目:web开发

这篇文章主要介绍“css文字怎么竖排显示”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“css文字怎么竖排显示”文章能帮助大家解决问题。

    css文字竖排显示的方法一:

    使用writing-mode属性

    语法:writing-mode:lr-tb或writing-mode:tb-rl

    参数:lr-tb:从左向右,从上往下;tb-rl:从上往下,从右向左。

    <!DOCTYPEhtml>

    <html>

    <head>

    <title>test</title>

    <metacharset="UTF-8">

    </head>

    <style>

    .one{

    margin:0auto;

    height:140px;

    writing-mode:vertical-lr;/*从左向右从右向左是writing-mode:vertical-rl;*/

    writing-mode:tb-lr;/*IE浏览器的从左向右从右向左是writing-mode:tb-rl;*/

    }

    </style>

    <body>

    <divclass="one">十轮霜影转庭梧,此夕羁人独向隅。

    未必素娥无怅恨,玉蟾清冷桂花孤。</div>

    </body>

    </html>

    这种方法兼容性不好,只有在IE浏览器中才能支持,所以并不推荐使用,这里就不过多介绍要想了解更多可以参考css在线手册。

    css文字竖排显示的方法二:

    对文字对象宽度设置只能排下一个文字的宽度距离,让文字一行排不下两个文字使其文字自动换行,就形成了竖立排版需求。

    <!DOCTYPEhtml>

    <html>

    <head>

    <title>test</title>

    <metacharset="UTF-8">

    </head>

    <style>

    .one{

    width:52px;

    margin:0auto;

    line-height:56px;

    font-size:50px;

    }

    </style>

    <body>

    <divclass="one">中秋月</div>

    </body>

    </html>

    注意:word-wrap:break-word;/*英文的时候需要加上这句,自动换行*/

    说明:对文字DIV设置较小的宽度,以达到一排只能排下一个文字,这样文字就自动换行,实现垂直竖列排版。
css文字怎么竖排显示

关于“css文字怎么竖排显示”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI