css控制文字竖排

时间：2010-12-10 来源：秩名

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

标签分类： CSS

相关阅读更多 +