一个一行内的解决方法。不知道你有没有记得，当给父级元素指定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>
时间： 2024-09-28 10:52:53