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. TP ajax

    ①Ajax使用:   注意传值的所有过程用的是小写,及时数据库列的名称中有大写字母 控制器部分: AjaxController.class.php <?php namespace Home\Co ...

  2. IIS配置(持续更新中...)

    本文暂时适用于IIS7.5. IIS配置文件路径:"C:\Windows\System32\inetsrv\config\applicationHost.config" 1.sta ...

  3. mysql-font的理解

    mysql-front是为mysql制作的一种图形化界面工具,可以管理和操作数据库,比如建表,修改数据,拖拽方式的数据库和表格,可编辑/可增加/删除的域,可编辑/可插入/删除的记录,可显示的成员,可执 ...

  4. hadoop报错java.io.IOException: Bad connect ack with firstBadLink as 192.168.1.218:50010

    [root@linuxmain hadoop]# bin/hadoop jar hdfs3.jar com.dragon.test.CopyToHDFS Java HotSpot(TM) Client ...

  5. coursera 《现代操作系统》 -- 第十周 文件系统(2)

    身份验证 Authentication 知道用户是谁.通过账号密码.Id 这样的识别出来. 访问控制 Permission 知道用户是谁后. 主动控制 记录用户ID和对应的访问权限 --> 记录 ...

  6. ng-disabled的使用

    1.适用范围 该指令适用于<input>, <select>,<button> 和 <textarea> 元素. 2.用法解析 ng-disabled ...

  7. Vue.js之组件传值

    Vue.js之组件传值 属性传值可以从父组件到子组件,也可以从子组件到父组件. 这里讲一下从父组件到子组件的传值 还以上次的demo为例,demo里有APP.vue是父组件,Header.vue,Us ...

  8. Web 框架本质解析

    一  Web框架本质 1. 自己开发Web框架 - socket - http协议 - HTML知识 - 数据库(pymysql,SQLAlchemy) HTTP: 无状态.短连接 TCP: 不断开 ...

  9. Android系统移植与调试之------->如何使用PhotoShop转换24位的bmp图片为16位bmp图片

    使用Android移植时候,很多图片都需要16为的bmp格式,所以研究了一下如何从24位转换成16位,供大家参阅 step1:查看bmp图片的属性,如下图所示,是24位的 step2:用PhotoSh ...

  10. bzoj3007 解救小云公主

    3007: 解救小云公主 Time Limit: 5 Sec  Memory Limit: 512 MB Submit: 159  Solved: 71 [id=3007" style=&q ...