“text-align:justify”不 生效 的 原因 就是文字在最后一行,所以可以再想要两端对齐的文字前后分别加一个标签,然后把文字挤在不是最后一行的位置上。
本教程操作环境:windows7系统、CSS3 && HT ML 5版、Dell G3 电 脑。
问题描述
目前有很多App都用了webview,但是…,webview还是有很多坑的,尤其是And ROI d和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="wrap PE r"> <span class="content"><i></i>这是想要两端对齐的文字<i></i></span> <!--这里设置两个i标签是因为前后都有,把文字挤回 原来 的位置--> </div>
css如下
.content { width: 100px;/*要有固定 宽 度,不然没法两端对齐*/ text-align: justify;/*设置两端对齐属性*/ } i { dis play : inline-block;/* 行内元素 */ width: 100%;/*可以挤掉文字,保证不跟文字在同一行*/ h ei ght: 0; visibil IT y: hidden; }
同上面的原理一样,可以用 伪类 来实现
.content { width: 100px;/*要有固定宽度,不然没法两端对齐*/ text-align: justify;/*设置两端对齐属性*/ } .content:before, .content :after { display: inline-block;/*行内元素*/ content: & # 39;'; width: 100%;/*可以挤掉文字,保证不跟文字在同一行*/ height: 0; visibility: hidden; }
推荐学习:css视频教程
以上就是css中的text-align不起作用该怎么办的详细内容,更多请关注其它相关 文章 !
总结
以上是 为你收集整理的 css中的text-align不起作用该怎么办 全部内容,希望文章能够帮你解决 css中的text-align不起作用该怎么办 所遇到的问题。
如果觉得 网站内容还不错, 推荐好友。
查看更多关于css中的text-align不起作用该怎么办的详细内容...