ホームページ > 記事 > ウェブフロントエンド > CSSのテキスト整列が機能しない場合の対処方法
「text-align:justify」が有効にならない理由は、テキストが最終行にあるため、両端を揃えたいテキストの前後にラベルを追加できます。そして、最後の行ではない位置にテキストを押し込みます。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
現在、多くのアプリが Webview を使用していますが、Webview には依然として多くの落とし穴、特に Android と iOS 間の互換性の問題があります。その中には、text-align
の問題があります。
実際、text-align: justify
が有効にならないという問題は Web 上にも存在します。text-align: justify
はコピー時に有効になりません。には 1 行しかありません。
最初の解決策は、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のテキスト整列が機能しない場合の対処方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。