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
So ändern Sie die feste Positionierung untergeordneter Elemente durch CSS3-Transformation in eine absolute Positionierung
In diesem Artikel wird die Methode vorgestellt, m...
Modulare CSS-Lösung
Es gibt wahrscheinlich ebenso viele modulare Lösu...
MySQL SQL-Anweisungsmethode zum Ausblenden der mittleren vier Ziffern der Mobiltelefonnummer
Erste Abfragetabellenstruktur (sys_users): WÄHLEN...
Detaillierte Erklärung zum Kopieren und Sichern von Docker-Containerdaten
Hier nehmen wir den Jenkins-Container als Beispie...
So erstellen Sie eine lnmp-Umgebung im Docker
Erstellen eines Projektverzeichnisses mkdir php E...
So gehen Sie mit dem Fehler beim Einfügen seltener Zeichen in MySQL um (falscher Zeichenfolgenwert)
Kürzlich wurde auf Unternehmensseite gemeldet, da...
Border-Radius IE8-kompatible Verarbeitungsmethode
Laut canisue (http://caniuse.com/#search=border-r...
Detaillierte Analyse und Verwendung des Befehls tcpdump unter Linux
Einführung Einfach ausgedrückt ist tcpdump ein Pa...
HTML-Head-Tag-Metadaten zum Erreichen einer Aktualisierungsumleitung
Code kopieren Der Code lautet wie folgt: <html...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.5.27 winx64
1. Installationspaket MySQL-Dienst-Downloadadress...
Lösung für das Problem, dass synchrone Replikationsfehler im MySQL5.6 GTID-Modus nicht übersprungen werden können
Datenbankversion: mysql> select version(); +--...
MySQL-Experiment: Verwenden von Explain zur Analyse des Indextrends
Überblick Die Indizierung ist eine Fähigkeit, die...
HTML-Tutorial: DOCTYPE-Abkürzung
Beim Schreiben von HTML-Code sollte die erste Zei...
Die konkrete Umsetzung des JavaScript-exklusiven Denkens
Im vorherigen Blog hat Xiao Xiong die Methoden ve...
Detaillierte Erläuterung der allgemeinen Schritte zur SQL-Anweisungsoptimierung
Vorwort In diesem Artikel erfahren Sie hauptsächl...