本文摘自PHP中文网,作者藏色散人,侵删。
css设置竖排文字的方法:1、通过“word-wrap: break-word;”等属性实现单个竖排文字;2、通过“writing-mode: tb-lr”等属性实现多行竖排文字;3、通过“rotate(90deg);”实现整体竖向排版。

本文操作环境:Windows7系统、HTML5&&CSS3版,DELL G3电脑
CSS几种简单方法实现文字竖向排版
下面介绍几种使用Css实现文字竖向排版的方法:
1.一个句子的竖向排列
如图:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <head>
<title>test</title>
<meta charset= "UTF-8" > </head> <style> .one {
width: 20px;
margin: 0 auto;
line-height: 24px;
font-size: 20px;}.two {
width: 15px;
margin: 0 auto;
line-height: 24px;
font-size: 20px;
word-wrap: break -word; } </style> <body>
<p class = "one" >我是竖列排版</p>
<p class = "two" >I AM ENGLISH</p> </body> </html>
|
2.多个句子竖向排列(如古诗)
如图:

1 2 3 4 5 6 7 8 9 | <!DOCTYPE html> <html> <head>
<title>test</title>
<meta charset= "UTF-8" > </head> <style> .one {
margin: 0 auto;
height: 140px;
writing-mode: vertical-lr;
writing-mode: tb-lr; } </style> <body>
<p class = "one" >欲话毗陵君反袂,欲言夏口我沾衣。谁知临老相逢日,悲叹声多语笑稀。</p>
<p class = "one" >I AM ENGLISH</p></body> </html>
|
3.字体横行,整体竖向排版
如图:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html><html><head>
<title>test</title>
<meta charset= "UTF-8" ></head><style>.one {
margin: 150px auto;
width: 200px;
font-size: 20px;
line-height: 24px;
transform:rotate(90deg);
-ms-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg); }</style><body>
<p class = "one" >欲话毗陵君反袂</p>
<p class = "one" >ENGLISH</p></body></html>
|
推荐学习:《css视频教程》
以上就是css如何设置竖排文字的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css font控制字体的多种变换
css属性区分大小写吗
css如何实现波浪效果
css 怎么去掉按钮样式
浅谈css实现毛玻璃效果的方法
常见的css框架有哪些
css的优点和缺点分别是什么
css怎么设置图片拉伸
css怎么设置右对齐
html5实践-使用css实现弹性视频的代码分享
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css如何设置竖排文字