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

Informationen zur Verwendung und Vorsichtsmaßnahmen von Promises in Javascript (empfohlen)

CSS-Implementierungscode für die Textausrichtung

Informationen zur Verwendung und Vorsichtsmaßnahmen von Promises in Javascript (empfohlen)

Konfigurieren Sie ein Implementierungsbeispiel für den Mysql-Master-Slave-Dienst

Analyse von Multithread-Programmierbeispielen unter Linux

Implementierungscode zur Verwendung von CSS-Texthervorhebung zum Hervorheben von Text

MySQL 5.7 MySQL-Befehlszeilenclient - Befehlsdetails

So aktivieren Sie Flash in Windows Server 2016

MySQL-Startfehler 1067 und ungültige Wiederherstellung nach Änderung des Zeichensatzes und Neustart

Detaillierte Schritte zum Einrichten eines Nexus-Servers

Praxis der Verwendung von SuperMap in Vue

Anfänger lernen einige HTML-Tags (3)

Artikel empfehlen

MySql-Wissenspunkte: Transaktion, Index, Sperrprinzip und Nutzungsanalyse

Zusammenfassung der Web-Frontend-Kenntnisse (persönliche praktische Erfahrung)

Erfahren Sie, wie Sie einen Hadoop 3.x-Pseudocluster auf der Tencent Cloud erstellen

Die Verwendung des V-Modells in Vue3-Komponenten und ausführliche Erklärung

Methode zum Vergleichen der Größe von Varchar-Typnummern in einer MySQL-Datenbank

SSH-Schlüsselpaare von einer oder mehreren Linux-Instanzen trennen

Detaillierte Erläuterung der Installationsmethode von Mysql 5.7.18 und des Prozesses zum Starten des MySQL-Dienstes

Lösung zum Vergessen des Passworts bei der Installation von MySQL unter Linux/Mac

Detaillierte Schritte zur Verwendung von Arthas in einem Docker-Container

Einführung in semantische HTML-Tags

Hinweise zum Import, Export und zur Migration von MySQL Billions of Data

So importieren Sie chinesische Daten in Navicat für SQLite in CSV

Detaillierte Erläuterung der Verbindungslimitkonfiguration von Nginx für IP-Adressen in einem Netzwerksegment

Leitfaden für Anfänger zum Erstellen einer Website ⑥: Detaillierte Verwendung von FlashFXP

CSS Lieferadresse Parallelogramm Linienstil Beispielcode