位置:首页 > web前端 > css

css实现文字竖排的方法

dearweb 发布:2021-11-30 09:21:46阅读:

作为前端的小伙伴,我们需要做的就是用最简洁的代码展示最漂亮的效果,今天给大家介绍的是如何一行代码解决文字垂直竖列排版布局。

使用writing-mode属性-不推荐 

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

参数:

1、lr-tb:从左向右,从上往下

2、tb-rl:从上往下,从右向左

运行代码发现,IE显示正常,火狐、谷歌浏览器却不支持,所以不建议使用writing-mode属性。

了解CSS手册的writing-mode

使用CSS模拟文字竖排

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

完整HTML源代码(包括div+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>

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

利用设置较小宽度,让一排显示不完两个文字,使其文字自动换行。

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

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

完整html代码:

<!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>

通过以上两个div css案例让大家学会使用css和html标签方式让文字兼容各大浏览器的垂直竖列排版。


24人点赞 返回栏目 分享一波

小礼物走一波,支持作者

还没有人赞赏,支持一波吧

留言 评论仅代表网友个人 留言列表

暂无留言,快来抢沙发吧!

网友在读
手机扫码查看 手机扫码查看