HTML vertical text (Safari, Firefox, Chrome, and Opera)

  1.  
  2. .vText {
  3. -moz-transform: rotate(-90deg) translate(0, 100%);
  4. -moz-transform-origin: 0% 100%;
  5. -o-transform: rotate(-90deg) translate(0, 100%);
  6. -o-transform-origin: 0% 100%;
  7. -webkit-transform: rotate(-90deg) translate(0, 100%);
  8. -webkit-transform-origin: 0% 100%;
  9. transform: rotate(-90deg) translate(0, 100%);
  10. transform-origin: 0% 100%;
  11. }
  12.  
  13. IE
    .zx {writing-mode:bt-lr; }
  14.  
  15. IEfirefox等不同浏览器中的效果不一样,用法也不一样。
  16.  
  17. Ref
    http://brickybox.com/2010/09/15/html-vertical-text-safari-firefox-chrome-and-opera
    http://generatedcontent.org/post/45384206019/writing-modes
    http://stackoverflow.com/questions/5524799/how-do-you-do-vertical-text-in-firefox

HTML文本/文字竖直方向/纵向显示的更多相关文章

  1. android中自定义view---实现竖直方向的文字功能,文字方向朝上,同时提供接口,判断当前touch的是哪个字符,并改变颜色

    android自定义view,实现竖直方向的文字功能,文字方向朝上,同时提供接口,判断当前touch的是哪个字符,并改变颜色. 由于时间比较仓促,因此没有对代码进行过多的优化,功能远远不如androi ...

  2. writing-mode,文字竖直书写,字符之间距离,单词之间距离

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. HTML中行内元素的竖直方向的padding和margin是否真的无效

    参考资料:Inline elements and padding 今天写一个导航栏时遇到了一个问题:行内元素的padding-top,padding-bottom和margin-top,margin- ...

  4. Android camera 竖直拍照 获取竖直方向照片

    竖直拍照 if (Integer.parseInt(Build.VERSION.SDK) >= 8) {     camera.setDisplayOrientation(90); } else ...

  5. html的a标签display:block之后文字竖直居中

    设置行高和a标签的高度一样就能居中,使用line-height

  6. CSS -- 文字竖直居中

    元素的height 和 lineheight 设置为一样即可.

  7. 三个css属性 设置文字竖直居中

    display: flex; justify-content:center; align-items:Center;

  8. 设置UIScrollView只可以水平或者竖直滚动

    UIScrollView里边包含多个UIWebView: 可以通过设置contentSize的值,设置其width为UIScrollerView可视区域的宽度:即UIScrollView的width, ...

  9. QML学习笔记(四)-TabView-竖直方向

    源码:https://github.com/sueRimn/QML-ExampleDemos 作者: 狐狸家的鱼 Github: 八至 版权声明:如需转载请获取授权和联系作者 想实现垂直竖直方向的Ta ...

随机推荐

  1. Android Studio使用百度地图问题总结

    一.常见问题APP Scode码校验失败 一般出现这个问题都是ak不正确导致 可能出错的地方 1.SHA1值没有正确获取 正确获取SHA1值:在左下角打开Terminal终端,进入debug.keys ...

  2. delphi 中配置文件的使用(*.ini)和TIniFile 用法

    一.配置文件 .ini 文件是基于文本类型的格式文件,用于存储程序初始化和配置数据. .ini文件是有段(Sections)和键(key)组成的,每个文件可以有 n个段(每个段有方括号括起来),每个段 ...

  3. iOS 成员变量和属性的区别

    一. 成员变量 1.成员变量的作用范围: @public:在任何地方都能直接访问对象的成员变量 @private:只能在当前类的对象方法中直接访问,如果子类要访问需要调用父类的get/set方法 @p ...

  4. python系列六:Python3元组tuple

    '''元组与列表类似,不同之处在于元组的元素不能修改.元组使用小括号,列表使用方括号.''''''uple元素不可变有一种特殊情况,当元素是可变对象时.对象内部属性是可以修改的!tuple的不可变限制 ...

  5. JavaScript数据结构与算法-栈练习

    栈的实现 // 栈类 function Stack () { this.dataStore = []; this.top = 0; // 栈顶位置 相当于length,不是索引. this.push ...

  6. Vue页面上实时显示当前时间,每秒更新

    有时候我们需要在页面上添加一个类似时钟的东西来实时显示当前时间,这个时候我们可以利用定时器来完成这个功能 <div id="app"> {{date}} </di ...

  7. 前端基础 DOM & BOM

    推荐阅读:http://www.cnblogs.com/yuanchenqi/articles/6893904.html#_label3 BOM对象 window 对象 所有浏览器都支持 window ...

  8. 我的Android进阶之旅------>Android中编解码学习笔记

    编解码学习笔记(一):基本概念 媒体业务是网络的主要业务之间.尤其移动互联网业务的兴起,在运营商和应用开发商中,媒体业务份量极重,其中媒体的编解码服务涉及需求分析.应用开发.释放license收费等等 ...

  9. MySQL 第五天

    回顾 连接查询: 多张表连接到一起, 不管记录数如何,字段数一定会增加. 分类: 内连接,外连接,自然连接和交叉连接 交叉连接: cross join(笛卡尔积) 内连接: inner join, 左 ...

  10. 博客没内容可写了怎么办?找BD!

    博客写了一段时间可能会感觉没内容可以写了,或者说同一个领域的内容写多了感觉有点千篇一律,这时要考虑扩展自己的写作领域,怎么去扩展呢?利用关键词工具可以衍生很多长尾词,当然这个有点牵强,有点为优化而优化 ...