文字竖排
来源:互联网 发布:javaee和javascript 编辑:程序博客网 时间:2024/04/28 00:10
今日闲逛,走到了维基文库水调歌头 (明月几时有),恰巧发现他居然是文字竖排的,很有兴趣一看。
网上目前两种方法竖排,
一种是用 writing-mode:tb-rl;
另一种是用 layout-flow: vertical-ideographic;
但遗憾的是,这两种方法都基本是 IE Only 的……
那么维基文库是如何做到的呢?随便翻看一下代码,恍然大悟~
- <div style="font-size:xx-large;font-weight:bold;line-height:1em;width:1.5em; float:right;">水調歌頭</div>
- <div style="width:1.5em; float:right;"> </div>
- <div style="width:1.5em; float:right;">蘇軾 </div>
- <div style="width:1.5em; float:right;"> </div>
- <div style="width:1.5em; float:right;">明月幾時有 </div>
- <div style="width:1.5em; float:right;">把酒問青天 </div>
- <div style="width:1.5em; float:right;">不知天上宮闕 </div>
- <div style="width:1.5em; float:right;">今夕是何年 </div>
- <div style="width:1.5em; float:right;">我欲乘風歸去 </div>
- <div style="width:1.5em; float:right;">又恐瓊樓玉宇 </div>
- <div style="width:1.5em; float:right;">高處不勝寒 </div>
- <div style="width:1.5em; float:right;">起舞弄清影 </div>
- <div style="width:1.5em; float:right;">何似在人間 </div>
- <div style="width:1.5em; float:right;"> </div>
- <div style="width:1.5em; float:right;">轉朱閣 </div>
- <div style="width:1.5em; float:right;">低綺戶 </div>
- <div style="width:1.5em; float:right;">照無眠 </div>
- <div style="width:1.5em; float:right;">不應有恨 </div>
- <div style="width:1.5em; float:right;">何事長向別時圓 </div>
- <div style="width:1.5em; float:right;">人有悲歡離合 </div>
- <div style="width:1.5em; float:right;">月有陰晴圓缺 </div>
- <div style="width:1.5em; float:right;">此事古難全 </div>
- <div style="width:1.5em; float:right;">但願人長久 </div>
- <div style="width:1.5em; float:right;">千里共嬋娟 </div>
虽然代码不是很优雅(自动生成的……)但大概意思也知道了。设置宽度为1.5倍的字宽,保证列距,然后让所有div右浮动。
很简单又很有用的技巧,兼容各个主流浏览器~
最后引用一句,对于IE“不應有恨……”,他有些私有属性还是挺有趣的……
(注:原文中“恨”是遗憾的意思。)
- 文字竖排
- 竖排文字
- 文字竖排
- 文字竖排
- 文字竖排
- 竖排文字
- CSS实现文字竖排
- C#实现文字竖排
- CSS文字竖排
- CSS 文字竖排
- Android竖排显示文字
- 文字竖排显示
- 文字竖排版
- CSS文字竖排
- html 文字竖排
- 文本框文字竖排
- FastReport 文字竖排
- ios 实现文字竖排
- 恩....
- 开源人力资源管理系统
- pku 1160 Post Office
- 路过这里
- 什么是爱
- 文字竖排
- 嵌入式软件工程师知识要点
- jQuery中queue和dequeue的用法
- 新手上路
- 在esx server上导入其它vmfs storage的方法
- 商人与梦想家
- 使SQL关键字变大写的小工具
- 控制函数队列
- nginx 实现缺省图片的方法