您当前位置：首页 > web前端 > htmlcss > CSS创建竖排文字的简单方法，有演示

CSS创建竖排文字的简单方法，有演示

来源：程序员人生发布时间：2013-12-26 17:24:52 阅读次数：2508次

在制作网页的时候我们经常需要创建一些竖排的文字，或许这对你来说是一件很简单的事情，但是你是否想过用CSS可有N种创建竖排文字的方法？下面是由我翻译自Nettuts+的文章，希望这几种方法能够给你带来一些提示。

方法一：<br />标签

一种可能的方法(但不推荐)是在每个字母后面添加<br />标签来实现竖排文字：

演示

<h1>N <br />E <br />T <br />T <br />U <br />T <br />S</h1><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

千万不要使用使用这种方法，它是跛脚和草率的。

方法二：静态包裹

通过这个方法，我们将每个字母包裹在一个span中，然后在CSS中设置它的display属性为block。

查看演示

<!DOCTYPE html><html><head><meta charset=utf-8 /><title>Vertical Text</title><style>h1 span { display: block; }</style></head><body><h1><span> N </span><span> E </span><span> T </span><span> T </span><span> U </span><span> T </span><span> S </span></h1></body></html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

这种方法的问题是，除了可怕的标签外，它需要你手工去给每个字母用span括起来。如果这些文字是由CMS动态生成的，那就别用这种方法了。

精彩内容，请点击下一页！

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 Ubuntu 9.04 中 WebQQ 聊天的方法

下一篇 Access 2000教程：4.3 主要对象及其关系

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点