日期：2010-12-10 10:56:00 来源：本站整理

css掌握文字竖排[网站美工]

赞助商链接

分享到： QQ空间新浪微博腾讯微博人人网

　　本文“css掌握文字竖排[网站美工]”是由七道奇为您精心收集，来源于网络转载，文章版权归文章作者所有，本站不对其观点以及内容做任何评价，请读者自行判断，以下是其具体内容：

一个一行内的办理办法.不知道你有没有记得,当给父级元素指定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>