在制作网页的时候我们经常需要创建一些竖排的文字,或许这对你来说是一件很简单的事情,但是你是否想过用CSS可有N种创建竖排文字的方法?下面是由我翻译自Nettuts+的文章,希望这几种方法能够给你带来一些提示。
方法一:<br />标签
一种可能的方法(但不推荐)是在每个字母后面添加<br />标签来实现竖排文字:
<h1> N <br />E <br />T <br />T <br />U <br />T <br />S </h1>
点击查看演示
千万不要使用使用这种方法,它是跛脚和草率的。
方法二:静态包裹
通过这个方法,我们将每个字母包裹在一个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>
点击查看演示
这种方法的问题是,除了可怕的标签外,它需要你手工去给每个字母用span括起来。如果这些文字是由CMS动态生成的,那就别用这种方法了。
方法三:使用JavaScript
我最初的想法是用JavaScript动态地添加span标签,这样我们就避开了方法二遇到的问题。
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Vertical Text</title>
<style> h1 span { display: block; } </style> </head> <body> <h1> NETTUTS </h1>
<script> var h1 = document.getElementsByTagName('h1')[0]; h1.innerHTML = '<span>' + h1.innerHTML.split('').join('</span><span>') + '</span>'; </script> </body> </html>
出处:露兜博客
责任编辑:bluehearts
上一页 下一页 CSS创建竖排文字的简单方法 [2]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|