suchen

Heim  >  Artikel  >  Web-Frontend  >  Erläuterung von Codebeispielen zum Ausrichten von Text an beiden Enden mit CSS

Erläuterung von Codebeispielen zum Ausrichten von Text an beiden Enden mit CSS

不言
不言nach vorne
2018-11-12 15:40:402567Durchsuche

Der Inhalt dieses Artikels besteht darin, die Codebeispiele für die Textausrichtung an beiden Enden zu erläutern. Ich hoffe, dass er für Sie hilfreich ist.

Beim Erstellen von Formularen kommt es häufig vor, dass die oberen und unteren Felder wie Name, Mobiltelefonnummer und Geburtsort aufeinander ausgerichtet werden. Auf diese Weise verwenden wir die Stile „Textausrichtung“ und „Textausrichtung“.

Stellen Sie die Textausrichtung einfach so ein, dass sie direkt ausgerichtet wird. Die Situation der Textausrichtung ist kompliziert und einige Leute sind möglicherweise nicht damit vertraut. Die Werte für IE lauten wie folgt:

auto: Ermöglicht dem Browser-Benutzeragenten, die zu verwendende Ausrichtungsregel zu bestimmen.

inter-word: Richtet Text aus, indem Leerzeichen zwischen Wörtern eingefügt werden. Dieses Verhalten ist die schnellste Möglichkeit, alle Textzeilen auszurichten. Sein Rechtfertigungsverhalten hat keine Auswirkung auf die letzte Zeile eines Absatzes

Zeitung: Richtet Text aus, indem der Abstand zwischen Wörtern oder Buchstaben vergrößert oder verkleinert wird. Ist das genaueste Format zum Blocksatz des lateinischen Alphabets.

distribute: Behandelt Leerzeichen ähnlich wie Zeitungspapier.

distribute-all-lines: Richtet Zeilen auf die gleiche Weise wie „distribute“ aus, schließt außerdem die letzte Zeile aus aus zwei ausgerichteten Absätzen. Gilt für ideografische Dokumente

inter-ideograph: Bietet eine vollständige Begründung für ideografischen Text. Es vergrößert oder verkleinert die Leerzeichen zwischen Ideogrammen und Wörtern

Aber es wurde zuerst als private Implementierung von IE implementiert, wie Text-Overflow, Overflow-X usw., und wurde erst sehr spät in FF In implementiert Mit anderen Worten, es gibt eine strenge Kompatibilitätsfrage. Und in FF und Chrome müssen Sie manuell Leerzeichen oder weiche Zeilenumbrüche zwischen chinesischen Zeichen einfügen, um wirksam zu werden. Der Widerstand, auf den Sie in Chrome stoßen, ist noch größer. 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>

Das obige ist der detaillierte Inhalt vonErläuterung von Codebeispielen zum Ausrichten von Text an beiden Enden mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css chrome auto overflow word
Stellungnahme：
Dieser Artikel ist reproduziert unter:segmentfault.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：So erreichen Sie mit CSS eine vertikale Zentrierung von Bildern unbekannter Höhe (Code im Anhang)Nächster Artikel：So erreichen Sie mit CSS eine vertikale Zentrierung von Bildern unbekannter Höhe (Code im Anhang)

In Verbindung stehende Artikel

Mehr sehen