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

概述在制作网页的时候我们经常需要创建一些竖排的文字，或许这对你来说是一件很简单的事情，但是你是否想过用CSS可有N种创建竖排文字的方法？下面是由我翻译自Nettuts+的文章，希望这几种方法能够给你带来一些提示。方法一：<br />标签一种可能的方法(但不推荐)是在每个字母后面添加<br />…

在制作网页的时候我们经常需要创建一些竖排的文字，或许这对你来说是一件很简单的事情，但是你是否想过用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动态生成的，那就别用这种方法了。

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

以上是内存溢出为你收集整理的CSS创建竖排文字的简单方法，有演示全部内容，希望文章能够帮你解决CSS创建竖排文字的简单方法，有演示所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/web/1024818.html

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

发表评论

评论列表（0条）