编辑主页 > 列表 > 正文
实现文字竖向排版
作者:acct 发布时间:2020/05/24 16:35:40 分数:0 跟帖:1
CSS几种简单方法实现文字竖向排版1.一个句子的竖向排列<!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>        <div class="one">竖列排版代码</div>        <div class="two">ENGLISH CODE</div>    </body>    </html>
2.多个句子竖向排列(诗词等)<!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>        <div class="one">五绝·红枫·余音——春来红一时,秋去红一世;霞霭绕朱林,赤风摇几枝。二零一九(己亥)年初冬</div>        <div class="one">I AM YUYINGUANYU</div>  </body>    </html>  
3.字体横行,整体向排版<!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>      <div class="one">春来红一时,秋去红一世;</div>      <div class="one">ENGLISH</div>  </body>  </html>  


网友跟帖 共1 条 [我也要发表回复]
删除回复acct - 回复于2020/5/24 16:36:49
1
Html网页文字竖排的(CSS)样式表法样式表的文字处理属性中有两个重要的属性:writing-mode和text-align。用法:1. writing-mode(设置对象书写方向)语法:writing-mode : lr-tb、tb-rl参数:lr-tb:从左向右,从上往下 tb-rl:从上往下,从右向左示例:div { writing-mode: tb-rl; }2. text-align(设置对象中文本的对齐方式)语法:text-align : left、right、center、justify参数:left:左对齐 right:右对齐 center:居中 justify:两端对齐示例:div { text-align : center; }3.竖排的实例<html><head><title >竖排文字</title ><style type="text/css">.tnt{Writing-mode:tb-rl;Text-align:left;font-size:16pt}</style></head><body><div class="tnt">五绝·红枫·余音春来红一时,秋去红一世;霞霭绕朱林,赤风摇几枝。二零一九(己亥)年初冬</div></body></html>    代码赋值:    为文字赋予的“writing-mode”的属性值为“tb-rl”,文字就“从上往下”排,赋予的“text-align”的属性值为“left”,文字就“从右向左”排。总之加入了< div >……< /div >里的内容都会按定义的排列方式排列。    需要说明的是“writing-mode”可能有些浏览器不支持.-----------------------------------------------------html文字竖排效果    一:实现文字从上而下,从左向右排列-webkit-writing-mode:vertical-rl;writing-mode:lr-tb ; html code<!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title>文字竖排</title> </head> <style>  .e_content h2.myGift{ width: 80px; height: auto; float: left;display: block; font-size: 48px; color: #000000; text-align: center;  margin: 30% 30px 10% 70px;}  .e_content_mian { width:150px; float: left;margin: 100px 20px 100px 0px;height: 480px;background: #00FF00; }  .e_content_mian p{-webkit-writing-mode:vertical-lr;writing-mode:tb-rl;writing-mode:vertical-lr;font-size:24px;color: #000000; padding: 0px 0px; text-align: justify;} </style> <body>  <div class="e_content_mian">    <p>   五绝·红枫·余音春来红一时,秋去红一世;霞霭绕朱林,赤风摇几枝。二零一九(己亥)年初冬</p>  </div> </body></html>    二:实现文字自上而下,从右向左排列-webkit-writing-mode:vertical-rl;writing-mode:tb-rl;html code <!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title>文字排</title>  <style>   .f_mian{ width:300px;height: 450px;float: right; margin: 0px 50px; overflow: auto;}   .f_mian p{    -webkit-writing-mode:vertical-rl;    writing-mode:tb-rl;    writing-mode:vertical-rl;    text-align: justify;     font-size:24px;    color: #000000;    padding: 0px 0px;    display: block; float: right;}  </style> </head> <body>  <div class="f_mian">    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;     五绝·红枫·余音春来红一时,秋去红一世;霞霭绕朱林,赤风摇几枝。二零一九(己亥)年初冬</p>  </div> </body></html>    代码取值:Horizontal-tb:水平方向自上而下方式。即。Left-right-top-bottom(类似IE私有值 lr-tb)Vertical-rl:垂直方向自右而左方式。即top-bottom-right-left(类似IE私有值tb-rl)Vertical-lr:垂直方向自左而右边方式。即top-bottom-left-rightLr-tb:左-右,上-下。在水平方向上从左向右。后一行在前一行的下面。所有的字形都是竖直向上。tb-rl:上-下,右-左。在垂直方向上从上向下,自右向左。后一竖行在前一竖行的左面。全角字符是竖直向上的,半角字符如拉丁字母或片假名顺时针旋转90度。[搜集参考]
版区推荐 >>
广告区