今天上午早些时候，我需要为我正在进行的一个项目创建垂直文本。在尝试了几个想法后，我在 推特上 寻找我们的粉丝对这个问题的各种想法。有很多很好的回应和想法，我们今天就来讨论一下!
方法1：<br> 标签
因此，实现垂直文本的一个可能的方法（尽管不推荐）是在每个字母后面添加<br> 标签：
<h1>
V <br />E <br />R <br />T <br />I <br />C <br />A <br />L
</h1>
不要使用这种方法，它既蹩脚又草率。
方法2：静态包覆
block 用这种方法，我们把每个字母包在一个跨度中，然后在我们的CSS中把它的display：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Vertical Text</title>
<style>
h1 span { display: block; }
</style>
</head>
<body>
<h1>
<span> V </span>
<span> E </span>
<span> R </span>
<span> T </span>
<span> I </span>
<span> C </span>
<span> A </span>
<span> L </span>
</h1>
</body>
</html>
这个解决方案的问题--除了可怕的标记之外--是它是一个手工过程。如果文本是由CMS动态生成的，你就不走运了。不要使用这种方法。
方法3：使用JavaScript
我最初的直觉是用JavaScript来动态添加span 标签。这样一来，我们就能绕过方法二中提到的问题：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
h1 span { display: block; }
</style>
</head>
<body>
<h1> VERTICAL </h1>
<script>
var h1 = document.getElementsByTagName('h1')[0];
h1.innerHTML = '<span>' + h1.innerHTML.split('').join('</span><span>') + '</span>';
</script>
</body>
</html>
这种方法无疑是一种改进。上面，我们把文本split ，然后用一个span ，把每个字母包起来。虽然我们可以使用类似于for 语句，或者$.map ，来过滤这个数组，但一个更好更快的解决方案是，同时手动连接和包起来的文本。
虽然更好，但并不推荐这种解决方案。而且，这里有两个原因：
- 如果JavaScript被禁用，这是否会破坏你的布局？
- 理想情况下，如果可能的话，我们应该使用CSS来完成这个任务。
方法4：给容器应用一个宽度
如果可以的话，让我们远离JavaScript。如果我们给容器元素应用一个宽度，并强迫文本包起来呢？这也行得通：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
h1 {
width: 50px;
font-size: 50px;
word-wrap: break-word;
}
</style>
</head>
<body>
<h1> VERTICAL </h1>
</body>
</html>
在这种情况下，我们给h1 标签应用一个非常窄的宽度，然后使它的font-size 等于这个精确的值。最后，通过设置word-wrap 等于break-word ，我们可以强制每个字母到自己的行上。然而，word-wrap: break-word是CSS3规范的一部分，并不符合所有浏览器的要求。
除去旧的浏览器，这似乎解决了我们的问题......但不是完全解决。上面的演示看起来确实有效，但玩像素值的风险太大。让我们试试把大写字母变成小写字母这样简单的方法。
方法5：应用letter-spacing
作为预防措施，并扩展方法四，我们为什么不应用相当大的letter-spacing 来解决这个问题？
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
h1 {
width: 50px;
font-size: 50px;
word-wrap: break-word;
letter-spacing: 20px; /* Set large letter-spacing as precaution */
}
</style>
</head>
<body>
<h1> VERTICAL </h1>
</body>
</html>
这似乎可以解决这个问题，虽然，我们在这里又使用了一点CSS3。
方法6：使用em
另外，还有一个单行本的解决方案。还记得我们学过将overflow: hidden 到一个父元素会奇迹般地使它包含其浮动吗？这个方法有点像!关键是使用em ，并在每个字母之间放置一个空格：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
h1 {
width: 1em;
font-size: 40px;
letter-spacing: 40px; /* arbitrarily large letter-spacing for safety */
}
</style>
</head>
<body>
<h1> V E R T I C A L </h1>
</body>
</html>
很整齐，对吗？而且，这样一来，你可以应用你希望的任何字体大小。因为我们使用的是em -- 它等于所选字体的x-height -- 然后我们就有了更大的灵活性。
但是，再一次，有时一个以上的字母会出现在一行中。你必须保证安全；这就是为什么我应用了任意大的letter-spacing ，以确保一行中永远不会有多于一个字母。
就我目前所知，这是最好的、最符合跨浏览器要求的解决方案。
方法7:Whitespace
实现这种效果的最后一种方法是利用white-space 属性：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
h1 { white-space: pre; }
</style>
</head>
<body>
<h1>
V
E
R
T
I
C
A
L
</h1>
</body>
</html>
通过将 white-space 设置 为 pre ，这将指示文本的行为，就像它在一个 pre 标签中 一样。因此，它尊重你所添加的任何间距。
方法8：使用writing-mode
我们的下一个方法是镇上最新的方法之一。我们在css中有一个叫做writing-mode 的属性，可以帮助我们书写垂直的文字。
将writing-mode ，和text-orientation ，将帮助你实现这一目标。writing-mode 所做的是改变文字的书写方向。你可以从水平方向，从上到下（好吧，这是写作模式的默认选项），或者从右到左的垂直方向，或者从左到右的垂直方向。这就是整个书写方向变得如此简单。如果你的应用程序在古老的浏览器中被看到，你需要小心。因为，该属性在老式浏览器中是不可用的。如果你想让writing-mode 在老式浏览器中工作，请添加以下内容：
- 从上到下的水平。
writing-mode: lr - 从右到左的垂直方向。
writing-mode: tb-rl - 垂直从上到下。
writing-mode: tb-lr
接下来，我们选择改变字符的方向。这就是text-orientation 属性变得有用的地方。有三个选项可供选择：mixed ，upright 和sideways ，其中mixed 是默认设置。
方法9：使用变换
最后，让我们来处理一个古怪的替代方案，如果上述所有与现代浏览器兼容的解决方案都失败了。如果由于某种原因，书写模式不能工作，你可以利用transform: rotate(90deg)属性。这将使文本按顺时针方向旋转。当然，如果你想让文本向另一个方向旋转，可以让它旋转（-90度）。
不可否认的是，这种方法是非常不方便的。你当然有所有其他的选择，来转动垂直方向的文本。
总结
曾经有那么几天，开发者在思考是不是应该有一个CSS3规则来完成这个任务？如果我可以设置一些类似于： font-display: letter-block; 的东西，让每个字母都被渲染成一个块状 ，会怎么样 ？好了，现在你有了像writing-mode 和text-orientation 这样的选项来实现垂直文本 。
