您现在的位置是：网站首页> 编程资料编程资料

使用CSS实现文字的竖排的简单方法css实现文字竖排效果示例代码

2021-09-05 715人已围观

简介 这篇文章主要介绍了使用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.     
  2.     
  3.     
  4. "Content-Type" content="text/html; charset=gb2312" />    
  5. 竖列排版实例 在线演示 www.jb51.net    
  6.     
  7.     
  8.   
  9. "shuli">我是竖列排版
  
  •     
  •   

    •     Demo

    上一篇：鼠标悬停图片产生边框的效果实现CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

    下一篇：对未知高度的图片设置垂直居中的方法详解CSS实现同一行的图片和文字垂直居中对齐的方法不定宽高div内图片垂直居中的css样式css实现文字图片垂直居中效果

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网