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

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

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

　　语法：writing-mode : lr-tb、tb-rl

　　参数：lr-tb：从左向右，从上往下 　tb-rl：从上往下，从右向左

　　示例：

　　CSS Code复制内容到剪贴板

　　div { writing-mode: tb-rl; }

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

　　语法：text-align : left、right、center、justify

　　参数：left：左对齐　　right：右对齐　　center：居中　　justify：两端对齐

　　示例：

　　CSS Code复制内容到剪贴板

　　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>  
时间： 2024-10-02 08:23:59

使用CSS实现文字的竖排的简单方法的相关文章

CSS控制文字超出部分显示省略号方法

测试浏览器: IE6/7/8/9.opera12.02.firefox15.0.1.chrome  代码如下 复制代码 <p style="width:200px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">省略我吧 省略我吧! 省略我吧!省略我! </p> 如果我们要给p标签定义text-overflow:ellipsis就可以这么写:  代码如下 复制代码 p {      

用CSS为图片添加阴影的简单方法

在网页设计中,为图片添加上阴影是一种非常不错的美化方法,经常会在设计当中用到.不用Photoshop,仅仅只用CSS如何为图片添加上阴影呢?这里有一种非常简单的方法. 如何实现这样的效果呢?其实很简单,下面是全部的代码: <html> <head> <style type="text/css"> img{ border-top:1px solid #dcd7c8; border-left:1px solid #dcd7c8; border-right

控制DIV中文字绝对居中的简单方法

DIV中的文字绝对居中以前老是用表格,现在有了很好的解决方案line-height便可轻松实现,感兴趣的朋友可以参考下,希望对大家有所帮助   搞了这么久,以前不知道怎么弄,老是用表格,今天终于搞清楚了... 水平居中:<div align="center">Content</div> 垂直居中:<div style="line-height:30px;height:30px;">Content</div> 两者结合,

CSS隐藏文字的几个方法

简单介绍几种CSS隐藏文字的方法,希望对大家有所帮助. 作为一个web前端开发 为了html语义化 常常要给内容模块加上一些标题来让页面更有意义 当然还有我们的图片按钮 在抛开css裸奔的情况下也能很顺利的汲取到页面信息 通常为了传达更好的视觉效果 我们常用图片替代掉字体 而早前的前端开发常直接不在html中给出内容 用 :(甚至为空) 这样在没有加载到css时就无法知道这个区块究竟是什么内容了 正题开始 通常偏移掉字体的方式是 (1) 使用text-indent:-9999px; 可是他有一个

用CSS实现文字环绕图片的效果

我们在做布局的过程中常常遇到文字围绕图片的效果.如何用CSS实现文字环绕图片的效果呢,通过这个例子就能看出.其实很简单,就是图片浮动位置的调整. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><style>div {width:300px;border:1px solid

JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果_javascript技巧

本文实例讲述了JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果.分享给大家供大家参考.具体如下: 这里演示JavaScript+CSS仿Mootools竖排黑色动画菜单,并非使用了Mootools,但效果却和使用了Mootools差不多,动画效果平滑,操作舒服,给菜单增色不少. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-mootools-style-demo/ 具体代码如下: <!DOCTYPE html

用CSS实现文字垂直居中的代码

用CSS实现文字垂直居中的代码 <style type="text/css"><!--.con_div{width:400px;height:300px;border:1px solid #777;text-align:center;display:table-cell;vertical-align:middle;background:red;color:#fff}/*FOR IE*/.webjx{width:0;height:100%;display:inline-

网页技巧：具有亲和力的CSS隐藏文字方法

css|技巧|网页 一个新的,更加具有亲和力的CSS隐藏文字方法介绍,说明为什么现有的几种CSS隐藏文字的方法的缺陷和新的方法如何弥补.实用性一般,但是这个方法挺新颖的. 1.display:none;的缺陷 搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略 屏幕阅读器(是为视觉上有障碍的人设计的读取屏幕内容的程序)会忽略被隐藏的文字. 2. visibility: hidden ;的缺陷这个大家应该比较熟悉就是隐藏的内容会占据他所应该占据物理空间 3.overflow:hidden;一个比较合

CSS实现文字包围图片的效果

在本例中,对<img>进行左浮动,实现文字包围图片的效果. html文件: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>CSS实现文字包围图片的效果</title> </head>