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手册writing-mode

二、使用CSS模拟文字竖排   -   TOP

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

1、完整HTML源代码(包括div+css代码):

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>竖列排版实例 在线演示 www.divcss5.com</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>

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

2、效果截图


CSS+DIV模拟换行实现竖列排版截图

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

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

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

1、完整html代码:

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

2、垂直竖列排版实例效果截图


使用br换行标签实现文字字体竖列排版

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

CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现?的更多相关文章

  1. 图片与文字在div里实现垂直水平都居中

    第一种方法,利用盒布局实现   <style type="text/css">/*盒布局实现图片与文字水平垂直居中*/ .div1{ width: 100%; heig ...

  2. &lt;转载&gt;div+css布局教程之div+css常见布局结构定义

    在使用div+css布局时,首先应该根据网页内容进行结构设计,仔细分析和规划你的页面结构,你可能得到类似这样的几块: 页面层容器.页面头部.标志和站点名称.站点导航(主菜单).主页面内容.子菜单.搜索 ...

  3. DIV+CSS 让同一行的图片和文字对齐【转藏】

    DIV+CSS 让同一行的图片和文字对齐 DIV+CSS 让同一行的图片和文字对齐 在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新 ...

  4. 2天驾驭DIV+CSS (基础篇)(转)

    这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...

  5. DIV+CSS规范命名大全

    网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 D ...

  6. 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码

    原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...

  7. DIV CSS 网页兼容全搞定 (IE6 IE7 IE8 IE9 火狐 谷歌)

    CSS兼容常用技巧 请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明. 1.div的垂直居中问题 vertical-align:middl ...

  8. DIV+CSS规范命名大全集合

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-06-19)   网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DI ...

  9. 设置文字在div中垂直居中,使用line-height

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-02-19) line-height 行间距 详细使用方法:http://www.w3school.com.cn/css/pr ...

随机推荐

  1. AngularJS学习第一课

    AngularJS2与AngularJS1有很大的不同. AngularJS2支持ECMAScript6,为了提升性能,支持移动化开发(安卓.ios平台),因此升级为AngularJS 2,Angul ...

  2. JS操作cookie

    JavaScript中的另一个机制:cookie,则可以达到真正全局变量的要求.cookie是浏览器 提供的一种机制,它将document 对象的cookie属性提供给JavaScript.可以由Ja ...

  3. ON DUPLICATE KEY UPDATE

    如果在INSERT语句末尾指定了ON DUPLICATE KEY UPDATE,并且插入行后会导致在一个UNIQUE索引或PRIMARY KEY中出现重复值,则在出现重复值的行执行UPDATE: 如果 ...

  4. Web 前端性能优化准则

    准则01:尽量减少http请求 “只有10%-20%的最终用户响应时间花在接收请求的HTML文档上,剩下的80%-90%时间花在HTML文档所引用的所有组件(图片,script,css,flash等等 ...

  5. 小甲鱼PE详解之输入表(导出表)详解(PE详解09)

    小甲鱼PE详解之输出表(导出表)详解(PE详解09) 当PE 文件被执行的时候,Windows 加载器将文件装入内存并将导入表(Export Table) 登记的动态链接库(一般是DLL 格式)文件一 ...

  6. iOS 获取当前时间 年、月、日、周几

    NSDate * nowDate = [NSDate new]; NSCalendar *calendar = [NSCalendar currentCalendar]; NSUInteger uni ...

  7. Developing User Interfaces

      Developing a User Interface with ADF Faces Purpose This tutorial covers developing the user interf ...

  8. Django基本配置与URLconf

    what's the Django python的框架主要有:Django.Flask.Tornado Django是一个开放源代码的Web应用框架,由Python写成.它的主要特点是大而全,我们需要 ...

  9. python retrying retry

    在写业务时, 有个业务需要在return某种情况下,进行重试. 代码类似于下面 from retrying import retry def verify(self): try: return sel ...

  10. 远程桌面web连接

      我们可以利用web浏览器搭配远程桌面技术来连接远程计算机,这个功能被称为远程桌面web连接(Remote desktop web connection),要享有此功能,请先在网络上一台window ...