【HTML】css样式writing-mode垂直显示文本测试
当前位置:点晴教程→知识管理交流
→『 技术文档交流 』
writing-mode:控制文字的属性方向,但是不是所有的浏览器都兼容,在网页上使用时,有的浏览器显示不出该样式。 测试浏览器:IE、QQ浏览器兼容模式。 测试浏览器:QQ浏览器极速模式 测试浏览器:火狐 测试结果:就测试的几个浏览器和自己浏览器的当前版本来说,tb-rl在div中效果都是一致的。中文和英文的文字方向不同,因为一般就亚洲字有垂直写法。 测试代码: <div style="width:400px;height:100px;background:#8ee09f;"> div中文まで<br>LODOP劳道谱 </div> <div style="width:400px;height:100px;background:#8ea5e0;writing-mode:tb-rl;"> div中文まで<br>LODOP劳道谱 </div> <div style="width:400px;height:100px;background:#dd8ee0;writing-mode:vertical-lr;"> div中文まで<br>LODOP劳道谱 </div> <table border=1> <tr> <td style="width:400px;height:100px;writing-mode:tb-rl;background:#8ee0df;">td中文まで<br>LODOP劳道谱</td> </tr> <tr> <td style="width:400px;height:100px;writing-mode:vertical-lr;background:#e0d58e;">td中文まで<br>LODOP劳道谱</td> </tr> </table> 图示:就测试的几个浏览器和自己浏览器的当前版本来说,tb-rl在div中效果都是一致的,且tb-rl在IE和兼容模式里,在td里也和div中效果一样。 在qq浏览器兼容和极速模式下测试了下在div中居中的垂直的文字,结果也是tb-rl在qq浏览器兼容和极速里都正常,加上行高等后,在qq兼容模式里,vertical-rl在div里显示有问题,加了行高后就是水平的了文字跑到了下面。 <div style="width:400px;height:100px;background:#8ee09f;text-align:center;line-height:100px;"> div中文まで </div> <div style="width:400px;height:100px;background:#8ea5e0;text-align:center;line-height:400px;writing-mode:tb-rl;"> div中文まで </div> <div style="width:400px;height:100px;background:#dd8ee0;text-align:center;line-height:400px;writing-mode:vertical-lr;"> div中文まで </div> <table border=1> <tr> <td style="width:400px;height:100px;writing-mode:tb-rl;background:#8ee0df;">td中文まで</td> </tr> <tr> <td style="width:400px;height:100px;writing-mode:vertical-lr;background:#e0d58e;">td中文まで</td> </tr> </table> 图示:
该文章在 2023/9/28 1:18:50 编辑过 |
关键字查询
相关文章
正在查询... |