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


.vText {
-moz-transform: rotate(-90deg) translate(0, 100%);
-moz-transform-origin: 0% 100%;
-o-transform: rotate(-90deg) translate(0, 100%);
-o-transform-origin: 0% 100%;
-webkit-transform: rotate(-90deg) translate(0, 100%);
-webkit-transform-origin: 0% 100%;
transform: rotate(-90deg) translate(0, 100%);
transform-origin: 0% 100%;
} IE:
.zx {writing-mode:bt-lr; } 在IE和firefox等不同浏览器中的效果不一样,用法也不一样。 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. Linux之(node.js)服务

    1.1下载源码 你需要在下载最新的Nodejs版本, https://nodejs.org/en/download/ http://nodejs.org/dist/ 现在以node-v7.7.1.ta ...

  2. 对EasyDarwin开源项目2018的思考与2019发展的规划:继续站在巨人的肩膀引入更多巨人

    EasyDarwin@2018思考 从2012年开始接触Darwin Streaming Server,到2018年从底层开始完全重新架构.研发.完成,EasyDarwin这个项目已经发展了6年了,时 ...

  3. Centos7安装dubbo管理控制台

    1.下载dubbo源代码 wget https://github.com/apache/incubator-dubbo/archive/2.5.x.zip 2.进入dubbo-admin目录下 cd ...

  4. python并发编程&多进程(一)

    本篇理论居多,实际操作见:  python并发编程&多进程(二) 一 什么是进程 进程:正在进行的一个过程或者说一个任务.而负责执行任务则是cpu. 举例(单核+多道,实现多个进程的并发执行) ...

  5. numpy利用数组进行数据处理

    将条件逻辑表述为数组运算 numpy.where()是一个三目运算的表达式 In [34]: xarr = np.array([1.1,1.2,1.3,1.4,1.5]) In [35]: yarr ...

  6. Django序列化

    一.Django序列化    1.序列化应用场景     1.关于Django中的序列化主要应用在将数据库中检索的数据返回给客户端用户,由于httpresponse只能返回字符串或者是字节,而从数据库 ...

  7. bootstrap模板

    一.bootstrap基本介绍 1.什么是bootstrap? bootstrap就是个前端快速开发的工具,该工具是个简单.直观.强悍的前端开发框架,让web开发更加迅速简单,同时也是个响应式布局,兼 ...

  8. Traverse the dict in Python

    We usually use the following 2 ways to traverse a dict: 1: for d in dic 2: for d in dic.keys() Which ...

  9. 曾经跳过的坑----jQuery mouseover与mouseenter,mouseout与mouseleave的区别

    mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...

  10. RabbitMQ队列/Redis缓存

    一.RabbitMQ队列 RabbitMQ安装(Centos7安装):1.安装依赖:yum install socat (不安装会报错)2.下载rpm包:wget http://www.rabbitm ...