css如何设置竖排文字


本文摘自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: vertical-rl;*/ 

    writing-mode: tb-lr;/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl;*/  }  </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);     /* IE 9 */

    -moz-transform:rotate(90deg);     /* Firefox */

    -webkit-transform:rotate(90deg); /* Safari 和 Chrome */

    -o-transform:rotate(90deg);     /* Opera */}</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》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...