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 サイトの他の関連記事を参照してください。