Que faire si l'alignement du texte en CSS ne fonctionne pas

La raison pour laquelle "text-align:justify" ne fonctionne pas est que le texte est sur la dernière ligne, vous pouvez donc ajouter une étiquette avant et après le texte que vous souhaitez aligner aux deux extrémités, puis presser le texte dans une position qui n'est pas la dernière ligne.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Description du problème

Actuellement, de nombreuses applications utilisent webview, mais... webview présente encore de nombreux pièges, notamment les problèmes de compatibilité entre Android et iOS. Parmi eux se trouve le problème de text-align.

En fait, le problème de text-align: justify ne prend pas effet existe également sur le web text-align: justify ne prendra pas effet lorsque la copie ne comporte qu'une seule ligne.

Solution

La première solution consiste à utiliser text-align-last: justify pour réparer text-align: justify qui ne fonctionne pas sur la dernière ligne.

Mais..., la compatibilité est toxique. Vérifiez la compatibilité

Android a toujours un certain degré de support, mais iOS est misérable et n'est pas du tout pris en charge, il ne peut donc qu'être modifié.

Analysetext-align: justifyLa raison pour laquelle cela ne fonctionne pas est que le texte est sur la dernière ligne, vous pouvez donc ajouter une étiquette avant et après le texte que vous souhaitez aligner aux deux extrémités, puis presser le texte dans une position ce n'est pas la dernière ligne.

html est le suivant

<div class="wrapper">
    <span class="content"><i></i>这是想要两端对齐的文字<i></i></span>
    <!--这里设置两个i标签是因为前后都有，把文字挤回原来的位置-->
</div>

css est le suivant

.content {
    width: 100px;/*要有固定宽度，不然没法两端对齐*/
    text-align: justify;/*设置两端对齐属性*/
}
i {
    display: inline-block;/*行内元素*/
    width: 100%;/*可以挤掉文字，保证不跟文字在同一行*/
    height: 0;
    visibility: hidden;
}

Identique au principe ci-dessus, il peut être implémenté à l'aide de pseudo-classes

.content {
    width: 100px;/*要有固定宽度，不然没法两端对齐*/
    text-align: justify;/*设置两端对齐属性*/
}
.content:before, .content:after {
    display: inline-block;/*行内元素*/
    content: '';
    width: 100%;/*可以挤掉文字，保证不跟文字在同一行*/
    height: 0;
    visibility: hidden;
}

Apprentissage recommandé : Tutoriel vidéo CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!