Implementierung von erzwungenen Zeilenumbrüchen und Nicht-Zeilenumbrüchen in div, td, p und anderen Containern in HTML
|
1. Erzwingen Sie keinen Zeilenumbruch und beenden Sie mit Auslassungspunkten. Code kopieren Der Code lautet wie folgt:<div Stil="Breite:100px;Überlauf:versteckt;Leerzeichen:nowrap;Textüberlauf:Ellipse;" > Hallo Freunde, Freunde, warum kann ich den Effekt nicht sehen? </div> 2. Automatischer Zeilenumbruch durch CSS Code kopieren Der Code lautet wie folgt:div{ Zeilenumbruch: Wortumbruch; Wörterumbruch: normal; } 3. CSS zwingt englische Wörter zum Umbrechen Code kopieren Der Code lautet wie folgt:div{Wortbruch:Break-All;} Wenn Divs verschachtelt sind, müssen Sie nur die Breite des äußeren Divs und white-spance:nowrap festlegen, damit das innere Div automatisch entsprechend dem Inhalt umbrochen wird. word-break:break-all und word-wrap:break-word können den Inhalt eines Containers wie z. B. eines DIV automatisch umbrechen. Der Unterschied zwischen ihnen ist: 1. word-break:break-all Wenn das Div beispielsweise 200 Pixel breit ist, wird sein Inhalt automatisch bei 200 Pixel umbrochen. Wenn am Ende der Zeile ein langes englisches Wort steht (z. B. congratulation), wird das Wort abgeschnitten und das Zeilenende ist conra (der vordere Teil von congratulation) und die nächste Zeile ist der hintere Teil von conguatulation (conguatulation). 2. word-wrap:break-word Das Beispiel ist das gleiche wie oben, aber der Unterschied besteht darin, dass das gesamte Wort „congratulation“ als Ganzes behandelt wird. Wenn die Breite am Zeilenende nicht ausreicht, um das gesamte Wort anzuzeigen, wird das gesamte Wort automatisch in die nächste Zeile gesetzt, anstatt das Wort abzuschneiden. 3. word-break;break-all Unterstützte Versionen: IE5 und höher. Dieses Verhalten ist das gleiche wie bei asiatischen Sprachen. Ermöglicht auch beliebige Wortumbrüche in Textzeilen für nicht-asiatische Sprachen. Dieser Wert ist für asiatischen Text geeignet, der nicht-asiatischen Text enthält. WORTUMBRUCH:break-word Unterstützte Versionen: IE5.5. Der obige Inhalt wird innerhalb der Grenzen umbrochen. Bei Bedarf werden auch Worttrennungen vorgenommen. Um eine Erweiterung zu vermeiden, wird die Tabelle automatisch umbrochen. Wörtertrennung: normal | alles umbrechen | alles behalten Parameter: normal: Befolgt die Textregeln für asiatische und nicht-asiatische Sprachen und erlaubt Zeilenumbrüche innerhalb von Wörtern break-all: Dieses Verhalten ist das gleiche wie bei asiatischen Sprachen. Ermöglicht auch beliebige Wortumbrüche in Textzeilen für nicht-asiatische Sprachen. Dieser Wert ist für asiatischen Text geeignet, der nicht-asiatischen Text enthält keep-all: Wie normal für alle nicht-asiatischen Sprachen. Für Chinesisch, Koreanisch und Japanisch sind Worttrennungen nicht zulässig. Syntax für nicht-asiatischen Text, der kleine Mengen asiatischen Text enthält: Zeilenumbruch: normal | Wortumbruch Parameter: normal: Ermöglicht dem Inhalt, über die angegebenen Containergrenzen hinaus zu schieben break-word: Der Inhalt wird innerhalb der Grenze umbrochen. Bei Bedarf werden auch Wortumbrüche vorgenommen. Beschreibung: Festlegen oder Abrufen, ob ein Zeilenumbruch erfolgen soll, wenn die aktuelle Zeile die Grenze des angegebenen Containers überschreitet. Die entsprechende Skriptfunktion ist WordWrap. Schauen Sie sich auch meine anderen Bücher an. Syntax: Tabellenlayout: auto | fest Parameter: auto: der standardmäßige automatische Algorithmus. Das Layout basiert auf dem Inhalt der einzelnen Zellen. Erst wenn jede einzelne Zelle ausgelesen und berechnet wurde, wird die Tabelle angezeigt. Sehr langsam behoben: Layout-Algorithmus behoben. Bei diesem Algorithmus basiert das horizontale Layout nur auf der Breite der Tabelle, der Breite des Tabellenrahmens, dem Zellenabstand und der Spaltenbreite und hat nichts mit dem Tabelleninhalt zu tun. Beschreibung: Legt den Layoutalgorithmus der Tabelle fest oder ruft ihn ab. Das entsprechende Skriptattribut ist tableLayout. Vorschlag: Bei der Erkennung von Word-Break durch 3C treten Anzeigeprobleme auf, die auch bei Baidu-Snapshots zu Problemen führen – OPERA FIREFOX-Browser unterstützen dieses Attribut nicht. Das Word-Break-Attribut kann durch white-space:normal; ersetzt werden, damit die Zeile in FireFox und IE korrekt umbrochen werden kann. Und bitte beachten Sie, dass die Leerzeichen zwischen den Wörtern nicht als Ersatz verwendet werden können, da die Zeile sonst nicht korrekt umbrochen werden kann. |
<<: Beschreibung des MySQL-Optimierungsparameters query_cache_limit
>>: Vue verwendet Openlayers zum Laden von Tiandi Map und Amap
Artikel empfehlen
MySQL Series 7 MySQL-Speicher-Engine
1. MyISAM-Speicher-Engine Mangel: Keine Unterstüt...
Detaillierte Erklärung des Flex-Layouts in CSS
Flex-Layout wird auch elastisches Layout genannt....
Detaillierte Erklärung des MySQL-Prepare-Prinzips
Vorteile von Prepare Der Grund, warum Prepare SQL...
Analyse des Tutorials zur Implementierung der Remote-Anmeldung unter Linux
Linux wird im Allgemeinen als Server verwendet un...
So starten Sie eine Transaktion in MySQL
Vorwort In diesem Artikel wird hauptsächlich besc...
Der Aufruf der Suchmaschine auf der Seite erfolgt am Beispiel von Baidu
Heute ist mir plötzlich eingefallen, dass es cool ...
Grafisches Tutorial zur Deinstallation und Installation von MySQL unter Linux
Dies ist mein erster Blog. Ich bin seit zwei Jahr...
Einige Details zu MySQL-Indizes
Vor ein paar Tagen stellte mir ein Kollege eine F...
Detaillierte Erklärung zum Erstellen eines Arrays in JavaScript
Inhaltsverzeichnis Erstellen von Arrays in JavaSc...
js verwendet FileReader zum Lesen lokaler Dateien oder Blobs
Inhaltsverzeichnis FileReader liest lokale Dateie...
Führen Sie die Schritte zum Konfigurieren der grundlegenden Benutzerauthentifizierung auf Nginx-Ebene aus.
Vorwort Anwendungsszenario: Wahrscheinlich muss d...
JavaScript+html implementiert zufällige QR-Code-Verifizierung auf Frontend-Seiten
Teilen Sie die coole zufällige QR-Code-Verifizier...
Front-End-Statusverwaltung (Teil 1)
Inhaltsverzeichnis 1. Was ist Front-End-Statusver...
Analyse und Lösung der Gründe, warum geplante Crontab-Aufgaben nicht ausgeführt werden
Vorwort Es gibt die folgenden Möglichkeiten, gepl...
Befehl zum Entfernen (Löschen) eines symbolischen Links in Linux
Möglicherweise müssen Sie in Linux manchmal symbo...