CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现？
DIV CSS实现文字竖排排版显示兼容各大浏览器，让文字垂直竖列排版布局。
有时我们需要一段文字进行从上到下竖列排版，我们知道CSS样式中有一样式可以让其竖列排版，但所有浏览器不全兼容，逼不得已放弃。但DIVCSS5有2中方法对文字字体实现竖排显示，在接下来通过知识讲解与实例案例演示让大家中文让文字字体垂直竖排显示。
实际的文字垂直竖排显示截图
一、原始使用writing-mode属性-不推荐 - TOP
语法：writing-mode:lr-tb或writing-mode:tb-rl
参数：
1、lr-tb：从左向右，从上往下
2、tb-rl：从上往下，从右向左
运行代码发现，IE显示正常，火狐、谷歌浏览器却不支持，所以不建议使用writing-mode属性。
二、使用CSS模拟文字竖排 - TOP
对文字对象宽度设置只能排下一个文字的宽度距离，让文字一行排不下两个文字使其文字自动换行，就形成了竖立排版需求。
- <!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设置较小的宽度，以达到一排只能排下一个文字，这样文字就自动换行，实现垂直竖列排版。
2、效果截图
CSS+DIV模拟换行实现竖列排版截图
利用设置较小宽度，让一排显示不完两个文字，使其文字自动换行。
三、使用br换行让其文字垂直竖排显示 - TOP
利用html br换行标签实现文字换行，对每个文字后加上换行br标签让其竖列排版。
1、完整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>
2、垂直竖列排版实例效果截图
使用br换行标签实现文字字体竖列排版
通过以上两个div css案例让大家学会使用css和html标签方式让文字兼容各大浏览器的垂直竖列排版。
CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现？的更多相关文章
- 图片与文字在div里实现垂直水平都居中
第一种方法,利用盒布局实现 <style type="text/css">/*盒布局实现图片与文字水平垂直居中*/ .div1{ width: 100%; heig ...
- <转载>div+css布局教程之div+css常见布局结构定义
在使用div+css布局时,首先应该根据网页内容进行结构设计,仔细分析和规划你的页面结构,你可能得到类似这样的几块: 页面层容器.页面头部.标志和站点名称.站点导航(主菜单).主页面内容.子菜单.搜索 ...
- DIV+CSS 让同一行的图片和文字对齐【转藏】
DIV+CSS 让同一行的图片和文字对齐 DIV+CSS 让同一行的图片和文字对齐 在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新 ...
- 2天驾驭DIV+CSS （基础篇）（转）
这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...
- DIV+CSS规范命名大全
网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 D ...
- 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码
原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...
- DIV CSS 网页兼容全搞定 （IE6 IE7 IE8 IE9 火狐 谷歌）
CSS兼容常用技巧 请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明. 1.div的垂直居中问题 vertical-align:middl ...
- DIV+CSS规范命名大全集合
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-06-19) 网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DI ...
- 设置文字在div中垂直居中，使用line-height
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-02-19) line-height 行间距 详细使用方法:http://www.w3school.com.cn/css/pr ...
随机推荐
- MVC缓存,使用数据层缓存,添加或修改时让缓存失效
在"MVC缓存01,运用控制器缓存或数据层缓存"中,在数据层中可以设置缓存的有用时刻.但这个还不够"智能",常常期望在修改或创立的时分使缓存失效,加载新的数据. ...
- Android - Binder驱动
以下资料摘录整理自老罗的Android之旅博客,是对老罗的博客关于Android底层原理的一个抽象的知识概括总结(如有错误欢迎指出)(侵删): http://blog.csdn.net/luosh ...
- ubuntu15.10下sublime text3 无法输入中文解决办法
原文链接:http://geek.csdn.net/news/detail/44464 1.首先保证你的电脑有c++编译环境 如果没有,通过以下指令安装 sudo apt-get install bu ...
- springMvc中406错误解决，springMvc使用json出现406 (Not Acceptable)
springMvc中406错误解决, springMvc使用json出现406 (Not Acceptable) >>>>>>>>>>> ...
- 反射+javacsv+scv文件构建资源获取
1.反射之前已经写过,大家可以在http://www.cnblogs.com/myadmin/p/5282628.html中大概了解下.同时请大家指正. javacsv.jar:java中用来处理cs ...
- ASP.NET得到系统相关信息
1. 在ASP.NET中专用属性: 获取服务器电脑名:Page.Server.ManchineName 获取用户信息:Page.User 获取客户端电脑名:Page.Request.UserHos ...
- Merge OUTPUT 高级用法综合写的一个MergeTab的存储过程
因为工作中常用到 合并两张表中的数据,主要是写下来给自己备忘,T-SQL 中 MERGE 的用法 WHEN MATCHED THEN UPDATE -- 中加了 后面要更新的列是否都相等,如果相等就没 ...
- C#当中的多线程_线程池
3.1 简介 线程池主要用在需要大量短暂的开销大的资源的情形.我们预先分配一些资源在线程池当中,当我们需要使用的时候,直接从池中取出,代替了重新创建,不用时候就送回到池当中. .NET当中的线程池是受 ...
- Android eclipse - aapt.exe has stopped working.
今天在修改Android的布局文件的时候,发现每保存一次,就提示: aapt.exe has stopped working(appt.exe已停止工作).很是郁闷,当时Android控制台已经提示错 ...
- oracle数据库误删恢复方法
一.如果只是误删部分数据或者某条数据可以通过 1.select * from 误删除的表明 as of timestamp to_Date('恢复年月日 时分秒', '恢复时间格式') ...