HTML文本/文字竖直方向/纵向显示
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文本/文字竖直方向/纵向显示的更多相关文章
- android中自定义view---实现竖直方向的文字功能,文字方向朝上,同时提供接口,判断当前touch的是哪个字符,并改变颜色
android自定义view,实现竖直方向的文字功能,文字方向朝上,同时提供接口,判断当前touch的是哪个字符,并改变颜色. 由于时间比较仓促,因此没有对代码进行过多的优化,功能远远不如androi ...
- writing-mode,文字竖直书写,字符之间距离,单词之间距离
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- HTML中行内元素的竖直方向的padding和margin是否真的无效
参考资料:Inline elements and padding 今天写一个导航栏时遇到了一个问题:行内元素的padding-top,padding-bottom和margin-top,margin- ...
- Android camera 竖直拍照 获取竖直方向照片
竖直拍照 if (Integer.parseInt(Build.VERSION.SDK) >= 8) { camera.setDisplayOrientation(90); } else ...
- html的a标签display:block之后文字竖直居中
设置行高和a标签的高度一样就能居中,使用line-height
- CSS -- 文字竖直居中
元素的height 和 lineheight 设置为一样即可.
- 三个css属性 设置文字竖直居中
display: flex; justify-content:center; align-items:Center;
- 设置UIScrollView只可以水平或者竖直滚动
UIScrollView里边包含多个UIWebView: 可以通过设置contentSize的值,设置其width为UIScrollerView可视区域的宽度:即UIScrollView的width, ...
- QML学习笔记(四)-TabView-竖直方向
源码:https://github.com/sueRimn/QML-ExampleDemos 作者: 狐狸家的鱼 Github: 八至 版权声明:如需转载请获取授权和联系作者 想实现垂直竖直方向的Ta ...
随机推荐
- jsx编译器 atom
开始学习react es6 觉得没有合适的编译器.于是找到了个Atom. 官网 https://atom.io/ 下载安装. 双击运行即可完成安装. 安装后点击 file>setting> ...
- Python数据驱动ddt
import ddtimport unittest """ddt模块包含了一个类的装饰器ddt和两个方法的装饰器: data:包含多个你想要传给测试用例的参数: file ...
- 海康、大华NVR网络硬盘录像机录像无插件全平台访问实现—录像回放时间轴功能实现方法
在之前的博文中我们有介绍方案*NVR硬件录像机web无插件播放方案(支持取特定时间段视频流)*:该片博文旨在介绍时间轴功能的实现和相关接口的调用: 时间轴样式展示: 问题分析 对于 时间轴的展示实现需 ...
- SharePoint服务器端对象模型 之 序言
对于刚刚开始接触SharePoint的开发人员,即使之前有较为丰富的ASP.NET开发经验,在面对SharePoint时候可能也很难找到入手的方向.对于任何一种开发平台而言,学习开发的过程大致会包括: ...
- .NET架构师必备知识
.NET架构师,我归纳一下要学的知识: 成为优秀程序员,需要学好的知识: 1. 面向对象编程.UML画图.设计模式.代码重构 2. 常用ORM工具 3. MVC,WCF,XMl, JQuery ,S ...
- Xamarin.Forms学习之位图(一)
在开始我的分享之前呢,让我先问下我的问题: 1.最近更新了Xamarin 4.1.1.3,我想问下版本更新信息在哪里看? 2.更新后我新建的项目没有UWP项目了(虽然没有用过,但是我想确认是4.1.1 ...
- MySQL中阻塞
因为不同锁之间的兼容性关系,在有些时刻一个事务中的锁需要等待另一个事务中的锁释放它占有的资源,这就是阻塞.阻塞不是一件坏事,是为了保证事务可以并发并且正常的运行 在InnoDB存储引擎中,参数inno ...
- Asp.Net MVC anti-forgery token的问题:nameidentifier or identityprovider not present
当使用ClaimsIdentity的时候,Asp.Net MVC在生成AntiForgeryToken的时候会默认使用User.Identity中两种ClaimsType的值:NameIdentifi ...
- java中参数传递的问题
public class Test { public static void main(String[] args) { StringBuffer a = new StringBuffer(" ...
- 转载:阮一峰 理解RESTful架构
转载 http://www.ruanyifeng.com/blog/2011/09/restful.html 越来越多的人开始意识到,网站即软件,而且是一种新型的软件. 这种"互联网软件&q ...