CSS文字垂直：
方法一：用块状span包括每个字。不过很麻烦。
1.1 纯块状span方法
<html> <head></head> <mce:style type="text/css"><!-- h1 span{ display:block; } --></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"><!-- h1 span{ display; } --></mce:style><style type="text/css" mce_bogus="1"> h1 span{ display; }</style> <mce:script type="text/javascript"><!-- function virtical(){ var h1 = getElementByTagName("h1")[0]; h1.innerHTML = "<span>" + h1.innerHTML.split("").join("</span><span>") + "</span>"; } window.onload = virtical; // --></mce:script> <body> <h1>CSS文字垂直</h1> </body> </html>
方法二： 纯CSS3方法
<html> <head></head> <mce:style type="text/css"><!-- h1 { width: 20px; word-wrap: break-word; word-spacing:10px; } --></mce:style><mce:style type="text/css" mce_bogus="1"><!-- h1 { width: 20px; word-wrap: break-word; word-spacing:10px; } --></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>
并非原创，吸收总结。
