Maison >interface Web >tutoriel CSS >Explication des exemples de code pour aligner le texte aux deux extrémités avec CSS

Explication des exemples de code pour aligner le texte aux deux extrémités avec CSS

不言avant: 2018-11-12 15:40:402599parcourir

Le contenu de cet article est d'expliquer les exemples de code CSS pour obtenir l'alignement du 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.

Lors de la création de formulaires, nous sommes souvent confrontés à la situation d'aligner les champs supérieur et inférieur, tels que le nom, le numéro de téléphone portable et le lieu de naissance. De cette façon, nous utiliserons les styles d’alignement et de justification du texte.

Définissez simplement text-align pour justifier directement. La situation de text-justify est compliquée et certaines personnes ne la connaissent peut-être pas. Les valeurs pour IE sont les suivantes :

auto : Permet à l'agent utilisateur du navigateur de déterminer la règle d'alignement à utiliser

inter-word : Aligne le texte en ajoutant des espaces entre les mots. Ce comportement constitue le moyen le plus rapide d’aligner toutes les lignes de texte. Son comportement justificatif n'a aucun effet sur la dernière ligne d'un paragraphe

journal : Aligne le texte en augmentant ou en diminuant l'espace entre les mots ou les lettres. Est le format le plus précis pour justifier l'alphabet latin

distribute : gère les espaces un peu comme un journal

distribute-all-lines : aligne les lignes de la même manière que distribuer, exclut également la dernière ligne de deux paragraphes alignés. S'applique aux documents idéographiques

inter-idéogramme : fournit une justification complète du texte idéographique. Il augmente ou diminue les espaces entre les idéogrammes et les mots

Mais il a d'abord été implémenté en tant qu'implémentation privée d'IE, comme text-overflow, overflow-x, etc., et n'a été implémenté que très tard dans FF In. en d’autres termes, il y a une question de compatibilité stricte. Et dans FF et Chrome, vous devez insérer manuellement des espaces vides ou des sauts de ligne doux entre les caractères chinois pour prendre effet. La résistance rencontrée dans Chrome est encore plus grande. p>

Plan :

.test1 {
      text-align:justify;
      text-justify:distribute-all-lines;/*ie6-8*/
      text-align-last:justify;/* ie9*/
      -moz-text-align-last:justify;/*ff*/
      -webkit-text-align-last:justify;/*chrome 20+*/
  }
  @media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
      .test1:after{
          content:".";
          display: inline-block;
          width:100%;
          overflow:hidden;
          height:0;
      }
  }
  
  运行代码：
  


<!DOCTYPE HTML>
<html>
    <head>
        <title>文本两端对齐 </title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

   
        <style>
    
            .box1{
                background:red;
                width:30%;
            }
            .test1 {
                text-align:justify;
                text-justify:distribute-all-lines;/*ie6-8*/
                text-align-last:justify;/* ie9*/
                -moz-text-align-last:justify;/*ff*/
                -webkit-text-align-last:justify;/*chrome 20+*/
            }
            @media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
                .test1:after{
                    content:".";
                    display: inline-block;
                    width:100%;
                    overflow:hidden;
                    height:0;
                }
            }
        </style>

    </head>
    <body>
        <div class="box1">
            <div class="test1">姓 名</div>
            <div class="test1">姓 名 姓 名</div>
            <div class="test1">姓 名 名</div>
            <div class="test1">所 在 地</div>
            <div class="test1">工 作 单 位</div>
        </div>
    </body>
</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!

css chrome auto overflow word

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment réaliser un centrage vertical d'images de hauteur inconnue avec CSS (code ci-joint)Article suivant：Comment réaliser un centrage vertical d'images de hauteur inconnue avec CSS (code ci-joint)

Articles Liés

Voir plus