css控制竖排文字方法

发布时间：01/15 来源：浏览：关键词：

一个一行内的解决方法。不知道你有没有记得，当给父级元素指定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>