一個一行內的解決方案。不知道你有沒有記得，當給父級元素指定overflow: hidden的時候，父元素就會擴充以包含浮動？這個方法就類似這個，關鍵是使用了em，並給每個字母之間添加了空格：
<!doctype html>
<html>
<head>
<meta charset=utf-8 />
<title>vertical text</title>
<style>
h1 {
width: 1em;
font-size: 40px;
letter-spacing: 40px; /* arbitrarily large letter-spacing for safety */
}
</style>
</head>
<body>
<h1> n e t t u t s </h1>
</body>
</html>
]
使用 white-space屬性：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vertical text</title>
<style>
h1 { white-space: pre; }
</style>
</head>
<body>
<h1>
j
e
f
f
r
e
y
</h1>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
