使用CSS实现文字的竖排

时间:2022-04-14 11:14:23

有时我们需要一段文字进行从上到下竖列排版,我们知道css样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃。

一、原始使用writing-mode属性-不推荐 

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

参数:
1、lr-tb:从左向右,从上往下
2、tb-rl:从上往下,从右向左
运行代码发现,IE显示正常,火狐、谷歌浏览器却不支持,所以不建议使用writing-mode属性。

二、使用CSS模拟文字竖排 

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

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>竖列排版实例 在线演示 www.divcss5.com</title> 
<style> 
body{text-align:center} 
.shuli{ margin:0 auto;width:20px;line-height:24px;border:1px solid #333} 
</style> 
</head> 
<body> 
<div class="shuli">我是竖列排版</div> 
</body> 
</html> 
效果图:

使用CSS实现文字的竖排

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

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>竖列排版实例 在线演示 www.divcss5.com</title> 
<style> 
body{text-align:center; line-height:22px} 
/* CSS注释说明:设置css文字居中,css行高为22px间隔 */ 
</style> 
</head> 
<body> 
我<br>是<br>竖<br>列<br>排<br>版 
</body> 
</html> 

效果图:

使用CSS实现文字的竖排