Comment aligner le texte aux deux extrémités avec CSS ? Comment aligner le texte aux deux extrémités-tutoriel CSS-php.cn

Comment aligner le texte aux deux extrémités avec CSS ? Comment aligner le texte aux deux extrémités

青灯夜游

Libérer： 2018-10-24 16:46:54

avant

8364 Les gens l'ont consulté

Le contenu de cet article est de présenter comment réaliser l'alignement du texte aux deux extrémités avec CSS ? Comment aligner le texte aux deux extrémités. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Un projet récent a rencontré une telle exigence : (exigeant que la partie titre soit alignée aux deux extrémités quelle que soit la quantité de texte)

Comme indiqué ci-dessous :

À cette époque, je ne pensais pas beaucoup à utiliser ' ' après tout, les étudiants en produit voulaient voir l'effet le plus rapidement possible, alors ils. je n'ai pas osé négliger ! Mais j'ai été abasourdi lorsque j'ai atteint la deuxième page.

Comme le montre la photo :

Il est évident que ' ' n'arrive plus à me satisfaire, j'ai donc pour aller à

Voici une brève explication des différences entre plusieurs espaces :

  /*半角的不断行的空白格*/
&ensp; /*半角的空格*/
&emsp; /*全角的空格*/

Copier après la connexion

L'effet page est là , mais en révisant plus tard, j'ai trouvé que cette façon d'écrire n'était pas flexible (bien que le contenu ici soit fixe), et deuxièmement, elle n'était pas assez sémantique. Alors naturellement, je veux le résoudre via CSS. Dans text-align, l'attribut center que nous pouvons le plus utiliser est l'attribut center. Il existe également un autre attribut appelé justifier (aligné aux deux extrémités), mais il n'est pas utilisé après le. la page est actualisée. En fait,

text-align:justify here peut être utilisé seul, à condition que le texte doive faire plus de deux lignes et que la dernière ligne ne soit pas alignée aux deux extrémités.

Nous devons donc utiliser une étendue de balise vide.

html:

 <p>职务：<span></span></p>

Copier après la connexion

css:

p{
  width:200px;
  text-align: justify;
}
p span{
  display:inline-block;
  width:100%;
}

Copier après la connexion

L'approche la plus parfaite ici consiste à utiliser le pseudo-élément ::after au lieu de la balise vide.

PS : Après avoir vérifié les informations, j'ai trouvé que text-align-last: justifier peut réaliser l'alignement de la dernière ligne aux deux extrémités, mais il semble avoir une mauvaise compatibilité (Safari ne le prend pas en charge)

CANIUSE（https://caniuse.com/#search=text-align-last）

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!