Comment aligner les deux extrémités du texte d'un paragraphe en HTML

Méthode : 1. Utilisez l'instruction "text-align:justify" pour aligner les deux extrémités du texte ; 2. Utilisez l'attribut justifier-content de la mise en page flex pour aligner les deux extrémités du texte, en utilisant la syntaxe. "justify-content: espace-autour" | espace-entre".

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

CSS obtient l'effet d'aligner les deux extrémités

L'alignement des deux extrémités n'est conceptuellement pas difficile à comprendre. Si vous ne comprenez pas ce que signifie l’alignement, vous pouvez jouer avec des logiciels bureautiques tels que Word.

Parlons de la façon d'aligner le texte aux deux extrémités. Je connais les méthodes suivantes :

text-align

text-align est utilisé pour définir l'alignement horizontal du texte dans les éléments au niveau du bloc. Si vous souhaitez centrer des éléments en ligne ou des éléments de bloc en ligne, vous pouvez utiliser la méthode text-align: center Text-align ne peut pas être utilisée pour obtenir l'alignement central des éléments de bloc. Si vous souhaitez que l'élément de bloc soit centré, vous pouvez utiliser la méthode margin: auto.

Il existe une valeur de justification sous l'attribut text-align qui peut définir l'alignement des deux extrémités de l'élément. Cependant, l'attribut text-align: justifier présente quelques défauts :

1. Avec un texte sur une seule ligne, l'effet d'alignement ne peut pas être obtenu aux deux extrémités.

2. Dans un texte multiligne, l'effet d'alignement de la dernière ligne de texte ne peut pas être obtenu.

Texte sur une seule ligne

<p class="keith">unclekeith wanna be a geek!</p>
.keith {
    background-color: lightblue;
    
}

Pour le texte sur plusieurs lignes, comme indiqué ci-dessous, selon notre compréhension, il doit être affiché comme indiqué à droite, mais après avoir défini l'alignement du texte : après la justification, il sera affiché comme indiqué à gauche. Il ne peut pas s'agir de l'effet d'alignement de la dernière ligne de texte de Xi'an.

Solution

Si vous voulez vraiment obtenir l'effet d'aligner les deux extrémités, vous pouvez utiliser la méthode suivante pour le résoudre.

//解决方法的思路：由于在单行文本下和多行文本下最后一样无法实现两端对齐效果，因此给元素新增一行，即可实现justify的两个不足之处。
.keith {
    text-align: justify;
}
.keith:after {
    display: inline-block;
    width: 100%;
    content: '';
}

Si vous sentez qu'il y a trop de lignes vides à la fin, vous pouvez définir une hauteur pour l'élément et définir overflow: Hidden pour le masquer.

justify-content

Sous la nouvelle disposition flexible de CSS3, il existe un attribut justification-content, qui peut contrôler l'alignement horizontal des éléments évolutifs. Il existe deux valeurs permettant d’obtenir un alignement aux deux extrémités. Cependant, justifier-contenu présente des problèmes de compatibilité et est pris en charge par IE10 et versions ultérieures, FF et Chrome. Et tous les navigateurs prennent en charge l'attribut text-align

justify-content: space-around; //伸缩项目会平均地分布在伸缩容器内，两端保留一半的空间。
justify-content: space-between; //伸缩项目会平均地分布在伸缩容器内，第一个伸缩项目在伸缩容器的左边缘，最后一个伸缩项目在伸缩容器的右边缘。

justify-content: space-around;

justify-content: space-between

Apprentissage recommandé : Tutoriel vidéo HTML

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!