CSS实现的中文字段的几种有趣排列方式

文字倒排（逆时针转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=”javascript”>

var oNum = 0;

function showText(){

var strText = ‘文字还有倒着竖排的？’;

var oDiv = document.all[‘oDiv’];

oDiv. innerHTML = 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>

第 1 2 页