本教程操作环境: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不起作用该怎么办的详细内容,更多请关注Work网其它相关文章!