|
在制作网页的时候我们经常需要创建一些竖排的文字，或许这对你来说是一件很简单的事情，但是你是否想过用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标准化版块参加讨论，我还想发表评论。
|
第 1 页 CSS创建竖排文字的简单方法 [1]
第 2 页 
