「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不起作用該怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章!