css实现文字竖排效果

在当前大家都习惯于横向排列的文本，但是绝大多数朋友也是知道的，在古代中国的文本是竖向排列的，本章节通过代码实例介绍一下如何实现文本的竖向排列效果，这样的需求在实际应用中也是有的。

代码如下:

<code>&lt;!DOCTYPE html&gt;</code>

<code>&lt;</code><code>html</code><code>&gt;</code>

<code>&lt;</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>meta</code> <code>charset</code><code>=</code><code>" utf-8"</code><code>&gt;</code>

<code>&lt;</code><code>title</code><code>&gt;蚂蚁部落&lt;/</code><code>title</code><code>&gt;</code>

<code>&lt;</code><code>style</code> <code>type</code><code>=</code><code>"text/css"</code><code>&gt;</code>

<code>#webfx{</code>

<code>  </code><code>position:absolute;</code>

<code>  </code><code>background:red;</code>

<code>  </code><code>top:50px;</code>

<code>  </code><code>right:100px;</code>

<code>  </code><code>width:100px;</code>

<code>  </code><code>writing-mode:tb-rl; </code>

<code>  </code><code>-webkit-writing-mode:vertical-rl;</code>

<code>}</code>

<code>&lt;/</code><code>style</code><code>&gt;</code>

<code>&lt;/</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>body</code><code>&gt;</code>

<code>&lt;</code><code>div</code> <code>id</code><code>=</code><code>webfx</code><code>&gt;蚂蚁部落欢迎您&lt;/</code><code>div</code><code>&gt;</code>

<code>&lt;/</code><code>body</code><code>&gt; </code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

原文发布时间为：2017-3-11

本文作者：admin

本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落