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等不同浏览器中的效果不一样，用法也不一样。

Refhttp://brickybox.com/2010/09/15/html-vertical-text-safari-firefox-chrome-and-operahttp://generatedcontent.org/post/45384206019/writing-modeshttp://stackoverflow.com/questions/5524799/how-do-you-do-vertical-text-in-firefox

时间： 2024-12-16 06:53:50

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

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

参考资料:Inline elements and padding 今天写一个导航栏时遇到了一个问题:行内元素的padding-top,padding-bottom和margin-top,margin-bottom是不是真的是无效的? 接下来就这个问题将具体分析: 1.行内元素拥有盒子模型么答案是是的.没错,行内元素跟块级元素一样,同样拥有盒子模型. 2.行内元素的padding-top,padding-bottom和margin-top,margin-bottom是否无效答案同样是是的.盒子

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

android自定义view,实现竖直方向的文字功能,文字方向朝上,同时提供接口,判断当前touch的是哪个字符,并改变颜色. 由于时间比较仓促,因此没有对代码进行过多的优化,功能远远不如android的自带的TextView强大,只是继承于view,而不是textview. 主要用途:电话本的侧边快速导航等效果图:(自定义字符串 “#ABCDEFGHIJKLMN),可以实现自定义任意字符串 view的实现: 1 import cn.carbs.verticalstraighttextview

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

竖直拍照 if (Integer.parseInt(Build.VERSION.SDK) >= 8) { camera.setDisplayOrientation(90); } else { if (getResources().getConfiguration().orientation == Configuration.ORIENTATION_PORTRAIT) { parameters.set("orientation", "port

Android自定义竖直方向SeekBar

写在前面因为有这样的一个场景,需要实现竖直方向的多色进度条,然后在网上也找了下,没看到符合需要的,于是自定义了一个,效果如下: 具体实现本来想定义水平的,然后旋转一下,后来发现还不如直接定义竖直方向来的直接,就直接在竖直方向画了下. 首先讲一下思路,就是通过继承View,然后通过onDraw()方法进行绘制.具体绘制的时候,需要处理一些小细节.比如,我们需要画一个圆形的滑动块,那么我们的背景色带就不能把整个宽度占满,要不然,小圆块只能和色带一样宽了,效果不是很好看,所以在绘制的时候应该把背景

对象水平对齐，并且按照竖直方向排列

;; ;;程序名称:对象水平对齐程序,并且按照竖直方向排列 ;;执行命令:tb2 ;;程序功能:将选定的对象左对齐,并且按照竖直方向排列. ;; (defun c:tb2(/ selobjs oldcmdecho) ;定义命令txtal,局部变量selobjs,oldcmdecho; (setq oldcmdecho (getvar "cmdecho")) ;oldcmdecho 存储命令回显模式 (setvar "cmdecho" 0) ;屏蔽提示 (setq s

竖直方向的ViewPager的实现方式

现在的ViewPager主要是横向的滑动实现,现在公司的业务需要实现竖直方向ViewPager,通过大量的寻找资料终于实现了废话不说直接上代码: 一:自定义viewPager package com.example.test; import java.lang.reflect.Method; import java.util.ArrayList; import java.util.Collections; import java.util.Comparator; import android

word表格元素竖直方向居中

表格元素数值居中觉得有用的话,欢迎一起讨论相互学习~Follow Me 表格单元中竖直方向偏上,需要居中. 原文地址:https://www.cnblogs.com/cloud-ken/p/12286992.html

文字竖直方向的滚动

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; } li{ height: 60px; color: saddlebrown; font-size: 30px;

【竖直方向】间歇模型轮播图

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 *{ 8 padding:0; 9 margin:0; 10 } 11 ul,ol{ 12 list-style: