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之（tomcat）服务之服务调优

    Tomcat调优原则: ● 增加连接数 ● 调整工作模式 ● 启用gzip压缩 ● 调整JVM内存大小 ● 作为web服务器时,与Apache或者Nginx整合 ● 合理选择垃圾回收算法 ● 尽量使用 ...

  2. linux/unix下telnet提示Escape character is '^]'的意义

    在linux/unix下使用telnet hostname port连接上主机后会提示Escape character is '^]' 这个提示的意思是按Ctrl + ] 会呼出telnet的命令行, ...

  3. POJ3259（虫洞）

    题目大意:给你一张图,先输入m条双向边(权值为正),再输入w条单向边(权值为负),判断是否有负环 题目思路:bellman-ford或者SPFA都行,我用的是SPFA(因为和POJ1860类似,就不加 ...

  4. 关于错误处理程序中【return】的用法

    先让俺这位新人帮各位有幸游览到我博客文章的叔叔阿姨哥哥姐姐们解释一下什么是错误处理?即:当程序发生错误时,保证程序不会异常中断的机制. 那么为什么程序中会有错误处理呢?像我们通常无论是玩手机或者玩游戏 ...

  5. IIPP迷你项目（三）“Stopwatch: The Game”

    0 本周项目说明 这一次博客是Coursera的IIPP课程第三周迷你项目的实现,基础要求是做一个秒表,能start能stop能reset,更高的要求是在此秒表的基础上完成两个小游戏,但是鉴于第二个小 ...

  6. Digit Division

    Digit Division Time limit: 1 s Memory limit: 512 MiB We are given a sequence of n decimal digits. Th ...

  7. 1878: [SDOI2009]HH的项链

    1878: [SDOI2009]HH的项链 Time Limit: 4 Sec  Memory Limit: 64 MBSubmit: 4420  Solved: 2199[Submit][Statu ...

  8. Machine Learning - week 2 - Multivariate Linear Regression

    Multiple Features 上一章中,hθ(x) = θ0 + θ1x,表示只有一个 feature.现在,有多个 features,所以 hθ(x) = θ0 + θ1x1 + θ2x2 + ...

  9. 剖析与优化 Go 的 web 应用

    https://mp.weixin.qq.com/s/HDsbZLOK3h8-XjejvPH2sA https://studygolang.com/articles/12685

  10. openvas-tutorial-for-beginners

    https://jonathansblog.co.uk/openvas-tutorial-for-beginners