CSS的文字垂直效果2种方法。

来源：互联网发布：c语言打印金字塔图形编辑：程序博客网时间：2024/06/15 07:28

CSS文字垂直：

方法一：用块状span包括每个字。不过很麻烦。

1.1 纯块状span方法

<html><head></head><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">h1 span{display:block;}</style><body><h1>CSS<span>文</span><span>字</span><span>垂</span><span>直</span></h1></body></html>

1.2 用javascript添加span方法

<html><head></head><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> h1 span{ display; }</style><mce:script type="text/javascript"></mce:script><body> <h1>CSS文字垂直</h1></body></html>

方法二：纯CSS3方法

<html> <head></head> <mce:style type="text/css"></mce:style><mce:style type="text/css" mce_bogus="1"></mce:style><style type="text/css" mce_bogus="1" mce_bogus="1"> h1 { width: 20px; word-wrap: break-word; word-spacing:10px; }</style> <body> <h1>CSS文字垂直</h1> </body> </html>

并非原创，吸收总结。