运维日志您现在的位置是:首页 > 博客日志 > 运维日志

css writing-mode 手机上文字竖向排版不生效的问题

<a href='mailto:'>微wx笑</a>的头像微wx笑 2022-06-13运维日志 3 0关键字: css  

通过以下样式设置文字竖向排版,在电脑上显示正常,但是在手机上不管是微信中,还是浏览器中,都不生效的解决方法
writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; -ms-writing-mode: vertical-lr;

通过以下样式设置文字竖向排版,在电脑上显示正常,但是在手机上不管是微信中,还是浏览器中,都不生效的解决方法cVe无知

writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; -ms-writing-mode: vertical-lr;cVe无知


cVe无知

产生这个问题的原因
cVe无知

直接在td上添加以上样式cVe无知

<td style="writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; -ms-writing-mode: vertical-lr;">文字竖向排版</td>

这样子在电脑上显示就是正常的,手机上就不行。cVe无知

解决的方法:cVe无知

再加一层 span 标签cVe无知

<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>


cVe无知

本文由 微wx笑 创作,采用 署名-非商业性使用-相同方式共享 4.0 许可协议,转载请附上原文出处链接及本声明。
原文链接:https://www.ivu4e.cn/blog/service/2022-06-13/1238.html

很赞哦! () 有话说 ()