css writing-mode 手机上文字竖向排版不生效的问题
微wx笑 2022-06-13【运维日志】 3 0关键字: css
通过以下样式设置文字竖向排版,在电脑上显示正常,但是在手机上不管是微信中,还是浏览器中,都不生效的解决方法
writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; -ms-writing-mode: vertical-lr;
通过以下样式设置文字竖向排版,在电脑上显示正常,但是在手机上不管是微信中,还是浏览器中,都不生效的解决方法
writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; -ms-writing-mode: vertical-lr;
产生这个问题的原因
直接在td上添加以上样式
<td style="writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; -ms-writing-mode: vertical-lr;">文字竖向排版</td>
这样子在电脑上显示就是正常的,手机上就不行。
解决的方法:
再加一层 span 标签
<td style="writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; -ms-writing-mode: vertical-lr;"><span style="writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; -ms-writing-mode: vertical-lr;">文字竖向排版</span></td>
本文由 微wx笑 创作,采用 署名-非商业性使用-相同方式共享 4.0 许可协议,转载请附上原文出处链接及本声明。
原文链接:https://www.ivu4e.cn/blog/service/2022-06-13/1238.html