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

Tipps zum Erstellen von Webseiten für Mobiltelefone

CSS-Implementierungscode für die Textausrichtung

Tipps zum Erstellen von Webseiten für Mobiltelefone

So installieren Sie MySQL über Yum auf CentOS7

Bringen Sie Ihnen bei, Dutzende von Zeilen JS zu verwenden, um coole interaktive Canvas-Effekte zu erzielen

Vue-Router-Beispielcode zum dynamischen Generieren von Navigationsmenüs basierend auf Backend-Berechtigungen

So installieren Sie PostgreSQL und PostGIS mit yum auf CentOS7

MySQL-String-Splitting-Beispiel (String-Extraktion ohne Trennzeichen)

Verwenden Sie das Docker-Buildkit, um ein Docker-Image zu erstellen, das auf dem Raspberry Pi verwendet werden kann

Installieren Sie nodejs und yarn und konfigurieren Sie den Taobao-Quellprozessdatensatz

JS implementiert ein zufälliges Namensaufrufsystem

Beschreiben Sie kurz, wie Sie das Tomcat-Image installieren und das Webprojekt in Docker bereitstellen

Artikel empfehlen

Diskussion über die Browsing-Designmethode für Webseiteninhalte

Der Implementierungsprozess der ECharts Multi-Chart-Verknüpfungsfunktion

Einfache Schritte zum Konfigurieren des Nginx-Reverse-Proxys mit SSL

HTML-Tutorial: Das Optgroup-Element verstehen

Erfahren Sie, wie Sie den Zabbix-Dienst auf Saltstack bereitstellen

Detaillierte Erklärung der Bildlaufleisten-Bildlaufsteuerung von DOM-Elementen in HTML

So implementieren Sie das Beobachtermuster in JavaScript

Neunundvierzig JavaScript-Tipps und Tricks

Docker entfernt abnormale Containervorgänge

vue.js Router verschachtelte Routen

So verwenden Sie Nginx als Proxy-Cache

Detaillierte Erklärung des Parameters slave_exec_mode in MySQL

10 Aspekte, die beim Entwurf und Aufbau einer umfangreichen Website-Architektur berücksichtigt werden müssen

【Webdesign】Teilen Sie E-WebTemplates exquisite Vorlagen für ausländische Webseiten (FLASH + PSD-Quelldatei + HTML).

Linux-Systemaufrufe für Betriebsdateien