css实现文字竖排显示的方法

发布时间：2020-09-14 14:13:44 作者：小新
来源：亿速云阅读：221

这篇文章给大家分享的是有关css实现文字竖排显示的方法的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。

css文字竖排显示的方法一：

使用writing-mode属性

语法：writing-mode:lr-tb或writing-mode:tb-rl

参数：lr-tb：从左向右，从上往下；tb-rl：从上往下，从右向左。

<!DOCTYPE html>  
<html>  
<head>  
    <title>test</title>  
    <meta charset="UTF-8">  
</head>  
<style>  
.one {  
    margin: 0 auto;  
    height: 140px;  
    writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/  
    writing-mode: tb-lr;/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/  
}  
</style>  
<body>  
    <div class="one">十轮霜影转庭梧，此夕羁人独向隅。
未必素娥无怅恨，玉蟾清冷桂花孤。 </div>  
</body>  
</html>

css文字竖排显示效果如下：

css实现文字竖排显示的方法

这种方法兼容性不好，只有在IE浏览器中才能支持，所以并不推荐使用，这里就不过多介绍要想了解更多可以参考css在线手册。

css文字竖排显示的方法二：

对文字对象宽度设置只能排下一个文字的宽度距离，让文字一行排不下两个文字使其文字自动换行，就形成了竖立排版需求。

<!DOCTYPE html>  
<html>  
<head>  
    <title>test</title>  
    <meta charset="UTF-8">  
</head>  
<style>  
.one {  
    width: 52px;  
    margin: 0 auto;  
    line-height: 56px;  
    font-size: 50px;
} 
</style>  
<body>  
    <div class="one">中秋月</div>  
</body>  
</html>

注意：word-wrap: break-word;/*英文的时候需要加上这句，自动换行*/

说明：对文字DIV设置较小的宽度，以达到一排只能排下一个文字，这样文字就自动换行，实现垂直竖列排版。

css文字竖排显示的效果如下：

css实现文字竖排显示的方法

css文字竖排显示的方法三：

推荐使用这种方法，觉得这个方法兼容性也好，而且代码简洁

<!DOCTYPE html> 
<html> 
<head> 
<style> 
h2 { width: 50px; font-size: 50px;letter-spacing: 20px; } 
</style> 
</head> 
<body> 
<h2>中秋月</h2>
</body> 
</html>

css文字竖排显示效果如下：

css实现文字竖排显示的方法

css文字竖排显示的方法四：

使用br换行让其文字垂直竖排显示

利用html br换行标签实现文字换行，对每个文字后加上换行br标签让其竖列排版。

    <!DOCTYPE html> 
    <html> 
    <head> 
    <style> 
    body{text-align:center; line-height:60px;font-size:30px} 
    /* CSS注释说明：设置css文字居中，css行高为22px间隔 */ 
    </style> 
    </head> 
    <body> 
    亿<br>速<br>云
    </body> 
    </html>

感谢各位的阅读！关于css实现文字竖排显示的方法就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！

css实现文字竖排显示的方法

相关阅读