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

In der MySQL-Datenbank werden datetime, bigint und timestamp zur Darstellung der Zeitauswahl verwendet. Welches davon ist für die Zeitspeicherung am effizientesten?

Artikel

Notieren Sie die Schritte zur Verwendung des MQTT-Servers, um eine sofortige Kommunikation in Vue zu realisieren

So lösen Sie das Problem, dass sich Ubuntu 18.04 wiederholt anmeldet/auf der Boot-Oberfläche hängen bleibt/die grafische Oberfläche nicht aufrufen kann

Ursache: Der NVIDIA-Grafikkartentreiber ist besch...

CSS-Implementierungscode für die Textausrichtung

Sechs Methoden zur Nginx-Optimierung

Verschiedene Probleme und Lösungen beim Bereitstellen von Tomcat zur Veröffentlichung von Projekten unter Linux

Detaillierte Erläuterung der Verwendung von Requisiten in den drei Hauptattributen von React

Eine kurze Diskussion über die Fallstricke der React UseEffect-Abschließung

In der MySQL-Datenbank werden datetime, bigint und timestamp zur Darstellung der Zeitauswahl verwendet. Welches davon ist für die Zeitspeicherung am effizientesten?

Notieren Sie die Schritte zur Verwendung des MQTT-Servers, um eine sofortige Kommunikation in Vue zu realisieren

Beispielcode zur Implementierung einer QR-Code-Scanbox mit CSS

Beispiel für die Implementierung der Hochverfügbarkeit von Keepalived+Nginx

Beispielcode für Nginx zur Erreichung dynamischer und statischer Trennung

CSS3-Mauszeiger-Übergangszoomeffekt

Artikel empfehlen

Lösung für abnormale Verbindungstabellen, die durch inkonsistente MySQL-Zeichensätze verursacht werden

Zusammenfassung der Stiländerungen des Eingabefelds vom Typ „file“

So deaktivieren Sie die automatische Eingabeaufforderung zum Speichern des Kennworts im Chrome-Browser

So lösen Sie das Problem, dass sich Ubuntu 18.04 wiederholt anmeldet/auf der Boot-Oberfläche hängen bleibt/die grafische Oberfläche nicht aufrufen kann

CSS implementiert horizontal scrollende Navigationsleiste auf Mobilgeräten (gilt auch für PC-Geräte)

Automatisches Failover von Slave-Knoten in der Replikationsarchitektur in MySQL 8.0.23

So verstehen Sie den einfachen Speichermodus der Statusverwaltung von Vue

So fahren Sie nginx herunter/starten es neu

Vorteile von MySQL-Abdeckungsindizes

Ausführliche Erläuterung der HTML-Grundlagen (Teil 1)

Schritte zur Verwendung von autoconf zum Generieren von Makefile und Kompilieren des Projekts

WeChat-Applet implementiert ein einfaches Würfelspiel

So verwenden Sie Nginx zum Erstellen eines statischen Ressourcenservers

Anwendung der MapState-Idee in Vuex

4 flexible SCSS-Kompilierungsausgabestile