CSS-Implementierungscode für die Textausrichtung

Beim Erstellen von Formularen kommt es häufig vor, dass zwei Felder, wie etwa Name, Handynummer und Geburtsort, übereinstimmen müssen. Auf diese Weise müssen wir Stile zur Textausrichtung und Textbegründung verwenden.

Stellen Sie die Textausrichtung einfach auf Blocksatz ein. Die Situation der Textausrichtung ist kompliziert und manche Leute sind möglicherweise nicht damit vertraut. Die Werte des IE sind wie folgt:

auto : Ermöglicht dem Browser-Benutzeragenten, die Berechtigung zur Verwendung zu bestimmen
Zwischenwort: Richten Sie Text durch Einfügen von Leerzeichen zwischen Wörtern aus. Dieses Verhalten ist der schnellste Weg, alle Textzeilen auszurichten. Das Ausrichtungsverhalten funktioniert nicht in der letzten Zeile eines Absatzes.
Zeitung: Richten Sie Text aus, indem Sie den Abstand zwischen Wörtern oder Buchstaben vergrößern oder verkleinern. Ist das präziseste Format zur Ausrichtung des lateinischen Alphabets
verteilen: behandelt Leerzeichen wie Zeitungspapier
distribute-all-lines: Richtet Zeilen auf dieselbe Weise aus wie „distribute“, schließt aber auch die letzte Zeile zweier ausgerichteter Absätze aus. Anwendbar auf ideografische Dokumente
Interideogramm: Sorgt für die vollständige Ausrichtung des ideografischen Textes. Er vergrößert oder verkleinert den Abstand zwischen Ideogrammen und Wörtern

Aber es wurde ursprünglich als private Funktion des IE implementiert, wie Text-Overflow, Overflow-X usw., und wurde erst sehr spät in FF implementiert. Mit anderen Worten, es gibt strikte Kompatibilitätsprobleme. Darüber hinaus erfordern FF und Chrome das manuelle Einfügen von Leerzeichen oder weichen Zeilenumbrüchen zwischen chinesischen Zeichen, damit dies wirksam wird, und der Widerstand ist in Chrome sogar noch größer. p>

planen:

.test1 {
          Textausrichtung: Blocksatz;
          Textausrichtung: Alle Zeilen verteilen;/*ie6-8*/
          text-align-last:justify;/* ie9*/
          -moz-text-align-last:justify;/*ff*/
          -webkit-text-align-last:justify;/*Chrome 20+*/
      }
      @media screen und (-webkit-min-device-pixel-ratio:0){/* chrome*/
          .test1:nach{
              Inhalt:".";
              Anzeige: Inline-Block;
              Breite: 100 %;
              Überlauf: versteckt;
              Höhe: 0;
          }
      }

Führen Sie den Code aus:

<!DOCTYPE HTML>
    <html>
        <Kopf>
            <title>Textausrichtung</title>
            <meta http-equiv="Inhaltstyp" content="text/html; charset=UTF-8">
            <Stil>
                .box1{
                    Hintergrund: rot;
                    Breite: 30 %;
                }
                .test1 {
                    Textausrichtung: Blocksatz;
                    Textausrichtung: Alle Zeilen verteilen;/*ie6-8*/
                    text-align-last:justify;/* ie9*/
                    -moz-text-align-last:justify;/*ff*/
                    -webkit-text-align-last:justify;/*Chrome 20+*/
                }
                @media screen und (-webkit-min-device-pixel-ratio:0){/* chrome*/
                    .test1:nach{
                        Inhalt:".";
                        Anzeige: Inline-Block;
                        Breite: 100 %;
                        Überlauf: versteckt;
                        Höhe: 0;
                    }
                }
            </Stil>
        </Kopf>
        <Text>
            <div Klasse="Box1">
                <div Klasse="test1">Name</div>
                <div class="test1">Name Name</div>
                <div Klasse="test1">Name</div>
                <div class="test1">Standort</div>
                <div class="test1">Arbeitsplatz</div>
            </div>
        </body>
    </html>

Zusammenfassen

Oben sehen Sie den Implementierungscode der vom Editor eingeführten CSS-Textausrichtung. Ich hoffe, er ist für alle hilfreich. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!

<<: Deaktivieren Sie die IE-Bildsymbolleiste

>>: So installieren Sie OpenSuse auf Virtualbox

Die Fallstricke bei der Beurteilung von NULL-Werten in MySQL

CSS-Implementierungscode für die Textausrichtung

Die Fallstricke bei der Beurteilung von NULL-Werten in MySQL

jQuery-Plugin zum Erreichen einer Bildunterbrechung

Webdesign-Erfahrung: Effizientes Schreiben von Webcode

Docker-Installations- und Konfigurationsschritte für RabbitMQ

Ist Ihre Website für IE8 geeignet?

Beispielcode einer in Vue3 gekapselten Lupenkomponente

nginx generiert automatisch Konfigurationsdateien im Docker-Container

Vier praktische Tipps für JavaScript-String-Operationen

Swiper+echarts realisiert den Links- und Rechts-Scrolleffekt mehrerer Dashboards

Eine kurze Zusammenfassung meiner Erfahrungen beim Schreiben von HTML-Seiten

Artikel empfehlen

Detaillierte Erklärung der Verwendung des Linux-Befehls lsof

JS-Implementierung eines Karussellbeispiels

Verwenden Sie crontab, um das Skript zur regelmäßigen Ausführung des JAR-Programms in centOS6 auszuführen

Natives JS zur Implementierung der E-Mail-Eingabeaufforderung im Anmeldefeld

Reines CSS, um die Textsymbolfunktion zu erreichen, indem das erste Zeichen der Zeichenfolge verwendet wird

Teilen Sie die Fallstricke von MySQLs current_timestamp und ihre Lösungen

Detailliertes Tutorial zum Veröffentlichen von Springboot-Projekten über das Docker-Plugin in IDEA

SQL-Implementierung LeetCode (176. Zweithöchstes Gehalt)

Eine vollständige Anleitung zur Konfiguration von Linux-Umgebungsvariablen

CSS nutzt geschickt Farbverläufe, um eine erweiterte Hintergrundlichtanimation zu erzielen

Detaillierte Erklärung der Vue-Optionen

Kommentare auf Webseiten verursachen Textüberlauf im Internet Explorer

MySQL Flush-List und Flushing-Mechanismus für Dirty Pages

Zusammenfassung der Anwendungsbereiche von Kubernetes

mysql ist keine interne Befehlsfehlerlösung