css中的text-align不起作用该怎么办
导读:收集整理的这篇文章主要介绍了css中的text-align不起作用该怎么办,觉得挺不错的,现在分享给大家,也给大家做个参考。“text-align:justify”不生效的原因就是文字在最后一行,所以可以再想要两端对齐的文字前后分别加一个标...
收集整理的这篇文章主要介绍了css中的text-align不起作用该怎么办,觉得挺不错的,现在分享给大家,也给大家做个参考。“text-align:justify”不生效的原因就是文字在最后一行,所以可以再想要两端对齐的文字前后分别加一个标签,然后把文字挤在不是最后一行的位置上。
本教程操作环境:windows7系统、CSS3& & HTML5版、Dell G3电脑。
问题描述
目前有很多App都用了webview,但是…,webview还是有很多坑的,尤其是AndROId和ios之间存在的兼容性问题。其中就有text-align
的问题。
其实text-align: justify
不生效的问题在web上面也存在,text-align: justify
在当文案只有一行的时候是不会生效的。
解决方案
首先的解决方案是用text-align-last: justify
来修复text-align: justify
对最后一行不起作用的问题。
但是…,兼容性毒。查看兼容性
Android还是有一定的支持度的,但是ios就惨了,完全不支持,所以只能改。
分析text-align: justify
不生效的原因就是文字在最后一行,所以可以再想要两端对齐的文字前后分别加一个标签,然后把文字挤在不是最后一行的位置上。
html如下
div class="wrapPEr"> span class="content"> i> /i> 这是想要两端对齐的文字i> /i> /span> !--这里设置两个i标签是因为前后都有,把文字挤回原来的位置--> /div>
css如下
.content { width: 100px; /*要有固定宽度,不然没法两端对齐*/ text-align: justify; /*设置两端对齐属性*/} i { display: inline-block; /*行内元素*/ width: 100%; /*可以挤掉文字,保证不跟文字在同一行*/ height: 0; visibilITy: hidden; }
同上面的原理一样,可以用伪类来实现
.content { width: 100px; /*要有固定宽度,不然没法两端对齐*/ text-align: justify; /*设置两端对齐属性*/} .content:before, .content:after { display: inline-block; /*行内元素*/ content: ''; width: 100%; /*可以挤掉文字,保证不跟文字在同一行*/ height: 0; visibility: hidden; }
推荐学习:css视频教程
以上就是css中的text-align不起作用该怎么办的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: css中的text-align不起作用该怎么办
本文地址: https://pptw.com/jishu/589515.html