源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

[CSS] 使用CSS实现文字的竖排的简单方法

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2015-8-5 17:29:00 | 显示全部楼层 |阅读模式
这篇文章主要介绍了使用CSS实现文字的竖排的简单方法,介绍两个相关属性的同时示例中则使用普通的排版参数设置来实现,需要的朋友可以参考下

样式表的文字处理属性中有两个重要的属性:writing-mode和text-align。让我们先看看它们的用法:

  1. writing-mode(设置对象书写方向)

  语法:writing-mode : lr-tb、tb-rl
  参数:lr-tb:从左向右,从上往下  tb-rl:从上往下,从右向左
  示例:

CSS Code复制内容到剪贴板
  1. div { writing-mode: tb-rl; }  

  2. text-align(设置对象中文本的对齐方式)

  语法:text-align : left、right、center、justify
  参数:left:左对齐  right:右对齐  center:居中  justify:两端对齐
  示例:

CSS Code复制内容到剪贴板
  1. div { text-align : center; }  

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

CSS Code复制内容到剪贴板
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />    
  5. <title>竖列排版实例 在线演示 www.jb51.net</title>    
  6. <style>    
  7. body{text-align:center}    
  8. .shuli{ margin:0 auto;width:20px;line-height:24px;border:1px solid #333}    
  9. </style>    
  10. </head>    
  11. <body>   
  12. <div class="shuli">我是竖列排版</div>   
  13. </body>    
  14. </html>  

    Demo

回复

使用道具 举报

29

主题

2万

回帖

194

积分

注册会员

Rank: 2

积分
194
发表于 2022-8-25 13:27:35 | 显示全部楼层
hi哦和烦恼农家女
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

186

积分

注册会员

Rank: 2

积分
186
发表于 2022-9-24 03:40:27 | 显示全部楼层
逛逛看看瞧瞧
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-11-6 01:01:50 | 显示全部楼层
谢谢楼主分享
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-12-22 15:30:07 | 显示全部楼层
还不错啊
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-1-24 17:51:17 | 显示全部楼层
看看怎么样再说
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

307

积分

中级会员

Rank: 3Rank: 3

积分
307
发表于 2023-2-1 18:00:19 | 显示全部楼层
天天源码社区论坛
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-4-13 18:50:28 | 显示全部楼层
下载来瞧瞧
回复 支持 反对

使用道具 举报

5

主题

2万

回帖

69

积分

注册会员

Rank: 2

积分
69
发表于 2023-6-14 03:48:28 | 显示全部楼层
啪啪啪生怕PSP怕
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

221

积分

中级会员

Rank: 3Rank: 3

积分
221
发表于 2024-5-13 02:25:04 | 显示全部楼层
搞个免费的用用
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-30 14:53 , Processed in 0.085920 second(s), 22 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表