文字倒排（逆时针转90度）： 运行代码框 1.文字倒排（逆时针转90度）<br><br><span style=”font-family:@宋体;color:red”>尽人事 顺天命</span><br><br>2.文字正写竖排,中文竖排，从右往左读<br><br><div style=”layout-flow: vertical-ideographic;height:399;float:right;”>在暗蓝色的海上，海水在欢快地泼溅<br>我们的心是自由的，我们的思想无边<br>这全是我们的帝国，它的权力到处通行<br>我们的旗帜就是王笏，谁碰到都得服从<br>我们过着粗犷的生涯，在风暴动荡里<br>从劳作到休息，什么样的日子都有乐趣<br>噢，谁能体会出？可不是你，娇养的奴仆<br>可不只有“无路之路”的游荡者才能知道？<br>在红色的酒杯中旋起我们的记忆<br>当胜利的伙伴们终于把财物平分<br>谁不落泪，当回忆暗淡了每人的前额：<br>现在，那倒下的勇士该会怎样地欢欣！<br></div> <br><br>3.文字倒写竖排<br><br><br><script langauge=”<a href="https://www.gaodaima.com/go.html?url=http://www.gaodaima.com/tag/javascript" title="JavaScript" rel="nofollow" target="_blank">JavaScript</a>“> var oNum = 0; function showText(){ var strText = ‘文字还有倒着竖排的？’; var oDiv = document.all[‘oDiv’]; oDiv. inner<a href="https://www.gaodaima.com/go.html?url=http://www.gaodaima.com/tag/html" title="html" rel="nofollow" target="_blank">html</a> = strText.substr(0, oNum); oNum = (oNum>strText.length) ? 0 : oNum+1 ; window.setTimeout(‘showText()’, 500); } window.onload = function(){ window.setTimeout(‘showText();’, 500); }</script><div id=”oDiv” style=”width:25px;height:180px;direction:rtl;unicode-bidi:bidi-override;layout-flow:vertical-ideographic;text-align:right;”></div><br>4.中文竖排，从左往右读：<br><style>div {display:inline;color:red; font:11pt 华文行楷; writing-mode:tb-rl;}</style><div>下定决心，</div><div>不怕牺牲，</div><div>排除万难，</div><div>争取胜利！</div><br><br>[/code]</p> <p><input style="CURSOR: hand" onfocus=this.blur() type=button value=运行代码> <input style="WIDTH: 95px; CURSOR: hand" onfocus=this.blur() onclick=cycode(code) type=button value=复制到剪贴板 name=Submit> <input style="CURSOR: hand" onfocus=this.blur() onclick=svcode(code) type=button value=另存代码> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行] </p> <p><span><strong>两种竖排的：</strong></span></p> <p><span>运行代码框</p> <p align=center><textarea style="WIDTH: 514px; HEIGHT: 79px" rows=5 cols=81><div style=”width:5px;float:left;”><font face=”@隶书” size=”5px” color=”red”>只要你坚持不懈什么样的结果都有可能</font></div><div style=”position:absolute;filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);float:right;”><font face=”华文行楷” size=”5px” color=”blue”>只要你坚持不懈什么样的结果都有可能</div>[/code]</p><div><div class="_t33rkthes8f"></div><script type="text/javascript">(window.slotbydup = window.slotbydup || []).push({id: "u6795179",container: "_t33rkthes8f",async: true});</script></div> <p><input style="CURSOR: hand" onfocus=this.blur() type=button value=运行代码> <input style="WIDTH: 95px; CURSOR: hand" onfocus=this.blur() onclick=cycode(code1) type=button value=复制到剪贴板 name=Submit> <input style="CURSOR: hand" onfocus=this.blur() onclick=svcode(code1) type=button value=另存代码> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行] </p> <p><span><span><strong>文字段的反向排列:</strong></span></span></p> <p><span><span>运行代码框<br /></P></p> <p align=center><textarea rows=12 cols=78><script type=”text/<a href="https://www.gaodaima.com/go.html?url=http://www.gaodaima.com/tag/java" title="java" rel="nofollow" target="_blank">java</a>script”>//functionscbg(objRef, state){ objRef.style.backgroundColor = (1 == state) ? ‘#EEEEEE’ : ‘#FFFFFF’; return;}//</script><table><tr><td width=”152″ height=”300″><center><bdo dir=”rtl”>欢迎光临网页教学网</bdo></td></tr></table>[/code]</p> <p><input style="CURSOR: hand" onfocus=this.blur() type=button value=运行代码> <input style="WIDTH: 95px; CURSOR: hand" onfocus=this.blur() onclick=cycode(code2) type=button value=复制到剪贴板 name=Submit> <input style="CURSOR: hand" onfocus=this.blur() onclick=svcode(code2) type=button value=另存代码> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行] </p> <p><span><span><span><strong>一种怪异的文字排法</strong>：</span></span></span></p> <p><span><span><span>运行代码框<br /></P></p> <p align=center><textarea style="WIDTH: 490px; HEIGHT: 97px" rows=6 cols=78><style>div{writing-mode:tb-rl;filter:flipH() flipV() alpha(opacity=50);}</style><div>你想用它来指挥星球大战吧?!如今齐天大圣也戴上了紧箍圈，他安慰自己说这也是一种修炼。算尽九九八十一难终于到了西天，历经万险原来是为了仇人相见。</div>[/code]</p> <p><input style="CURSOR: hand" onfocus=this.blur() type=button value=运行代码> <input style="WIDTH: 95px; CURSOR: hand" onfocus=this.blur() onclick=cycode(code3) type=button value=复制到剪贴板 name=Submit> <input style="CURSOR: hand" onfocus=this.blur() onclick=svcode(code3) type=button value=另存代码> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</p> <p align=center><textarea style="WIDTH: 490px; HEIGHT: 134px" rows=9 cols=78><center><table><tr><td width=”352″ height=”300″ style=”filter:fliph;font-size:20px;font-family:@隶书;color:deeppink;”><center><bdo dir=”rtl” ><i>对网页设计感兴趣的朋友可以交个朋友</i></bdo></td></tr></table>[/code]</p> <p><input style="CURSOR: hand" onfocus=this.blur() type=button value=运行代码> <input style="WIDTH: 95px; CURSOR: hand" onfocus=this.blur() onclick=cycode(code4) type=button value=复制到剪贴板 name=Submit> <input style="CURSOR: hand" onfocus=this.blur() onclick=svcode(code4) type=button value=另存代码> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行] </p> <p></span></span></span></span></span></SPAN> </p> <p>欢迎大家阅读<span style='color:red;'>《<a href="https://www.gaodaima.com/go.html?url=http://www.gaodaima.com/tag/css" title="css" rel="nofollow" target="_blank">css</a>实现的中文字段的几种有趣排列方式_css》</span>,跪求各位点评,若觉得好的话请收藏本文，by <strong>搞代码</strong></p> <hr /><div class="open-message">搞代码网（<a href="www.gaodaima.com" target="_blank" title="gaodaima.com">gaodaima.com</a>）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱<a>chengxuyuan@gaodaima.com</a>，我们会在看到邮件的第一时间内为您处理，或直接联系<a>QQ：872152909</a>。本网站采用<a href="https://www.gaodaima.com/go.html?url=http://creativecommons.org/licenses/by-nc-sa/3.0/" rel="nofollow" target="_blank" title="BY-NC-SA授权协议">BY-NC-SA</a>协议进行授权 <br >转载请注明原文链接：<a href="https://www.gaodaima.com/22270.html" target="_blank" title="CSS实现的中文字段的几种有趣排列方式_css">CSS实现的中文字段的几种有趣排列方式_css</a><a id="spreadAds" target="_blank" href="" onclick="spreadAds()"></a><a id="spreadAds2" target="_blank" href=""></a> </div> </p> <div class="article-social"> <a href="javascript:;" data-action="ding" data-id="22270" id="Addlike" class="action"><i class="fa fa-heart-o"></i>喜欢 (<span class="count">0</span>)</a><span class="or"><style>.article-social .weixin:hover{background:#fff;}</style><a class="weixin" style="border-bottom:0px;font-size:15pt;cursor:pointer;">赏<div class="weixin-popover"><div class="popover bottom in"><div class="arrow"></div><div class="popover-title"><center>[搞代码]</center></div><div class="popover-content"><img width="200px" height="200px" src="http://www.gaodaima.com/wp-content/uploads/hai_AliPay.png" ></div></div></div></a></span><span class="action action-share bdsharebuttonbox"><i class="fa fa-share-alt"></i>分享 (<span class="bds_count" data-cmd="count" title="累计分享0次">0</span>)<div class="action-popover"><div class="popover top in"><div class="arrow"></div><div class="popover-content"><a href="#" class="sinaweibo fa fa-weibo" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_qzone fa fa-star" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="qq fa fa-qq" data-cmd="sqq" title="分享到QQ好友"></a><a href="#" class="bds_renren fa fa-renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_weixin fa fa-weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_more fa fa-ellipsis-h" data-cmd="more"></a></div></div></div></span></div> </article> <footer class="article-footer"> <div class="article-tags"><i class="fa fa-tags"></i><a href="https://www.gaodaima.com/tag/html" rel="tag">html</a><a href="https://www.gaodaima.com/tag/java" rel="tag">java</a><a href="https://www.gaodaima.com/tag/javascript" rel="tag">JavaScript</a></div></footer> <nav class="article-nav"><div class="_d13vl98i0pw"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6795176", container: "_d13vl98i0pw", async: true });</script> </nav><div id="donatecoffee" style="overflow:auto;display:none;"><img width="400" height="400" alt="支持作者一杯咖啡" src="http://www.gaodaima.com/wp-content/uploads/hai_AliPay.png"></div> <div class="related_top"> <div class="related_posts"><ul class="related_img"> <li class="related_box" > <a href="https://www.gaodaima.com/432440.html" title="java怎么样学java正确" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/5.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="java怎么样学java正确" /><br><span class="r_title">java怎么样学java正确</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/432401.html" title="Java面试题（11）" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/2.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="Java面试题（11）" /><br><span class="r_title">Java面试题（11）</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/432366.html" title="软件构造 03 正则表达式" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/12.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="软件构造 03 正则表达式" /><br><span class="r_title">软件构造 03 正则表达式</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/432360.html" title="类和对象的概念与类和对象的关系" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/8.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="类和对象的概念与类和对象的关系" /><br><span class="r_title">类和对象的概念与类和对象的关系</span></a> </li> </ul><div class="relates"><div class="_mw9fz31sqco"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6795180", container: "_mw9fz31sqco", async: true });</script><ul><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432359.html">面向对象思想概述、类和对象概念、类和对象的关系</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432357.html">4.15软工学习周报</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432314.html">Java面向对象下笔记&1000以内素数</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432291.html">学习Java应该留意的问题</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432250.html">Java集合框架(四)-HashMap</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432246.html">java学习</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432243.html">Java 入门与进阶P-7.1+P-7.2</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432233.html">Java方法</a></li></ul></div></div> </div> <div id="comment-ad" class="banner banner-related"><div class="_9madbukio7r"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6677406", container: "_9madbukio7r", async: true });</script><!-- 多条广告如下脚本只需引入一次 --><script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" ></script></div> <div id="respond" class="no_webshot"> <form action="https://www.gaodaima.com/asdloie8574asdqwexzxdqwertasdqwe.php" method="post" id="commentform"> <div class="comt-title"> <div class="comt-avatar pull-left"> <img src="https://cdn.v2ex.com/gravatar/?s=50" class="avatar avatar-108"> </div> <div class="comt-author pull-left"> 发表我的评论 </div> <a id="cancel-comment-reply-link" class="pull-right" href="javascript:;">取消评论</a> </div> <div class="comt"> <div class="comt-box"> <textarea placeholder="说点什么吧…" class="input-block-level comt-area" name="comment" id="comment" cols="100%" rows="3" tabindex="1" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"> 提交评论 评论通知 表情 贴图 加粗 删除线 居中 斜体 签到