CSS-Langzeilenumbruch. Wie schließe ich Wörter in CSS ein, die nicht in einen Block passen? Aktivieren Sie die Silbentrennung für Wörter, die nicht passen

💖 Gefällt es dir? Teilen Sie den Link mit Ihren Freunden
0

Hallo zusammen und los geht's. Nehmen wir an, wir haben den folgenden Text:

Die Regierung der Vereinigten Arabischen Emirate und die Verwaltung konzentrieren in dieser Stadt alle neuesten Technologien, die auf den neuesten Errungenschaften von Wissenschaft und Technologie basieren, und versuchen, sie wie direkt aus der Leinwand einer Science-Fiction in eine Stadt der Zukunft zu verwandeln Film. Zu diesen Technologien gehören Roboterpolizisten, Roboterautos und das Hyperloop-Transportsystem. In naher Zukunft wird in Dubai ein automatisierter Flugtaxidienst seinen Betrieb aufnehmen. Und in Vorbereitung auf diese Veranstaltung absolvierte ein elektrischer zweisitziger Volocopter mit 18 Rotoren, der als Taxi eingesetzt wird, seinen Erstflug im Automatikmodus, schreiben sie...

Hier haben wir einen Text, mit dem wir nun beginnen werden zu arbeiten.

Und die erste Eigenschaft, die wir betrachten werden, heißt Wortbruch

Wortumbruch: normal | alles behalten | Alles kaputt machen

Uns interessieren vor allem zwei Werte dieser normalen Eigenschaft – der Standardwert und Break-All, mit deren Hilfe wir feststellen, dass der Zeilenumbruch Zeichen für Zeichen erfolgt. Bei „Keep-All“ wird dieser Wert zum Umbrechen von Wörtern in Chinesisch, Japanisch und Koreanisch verwendet.

P( Wort-Break: Break-All;. )

Bitte beachten Sie, dass nach der Anwendung dieses Stils unser gesamter Text auf die volle verfügbare Breite gestreckt wird und Bindestriche nicht durch Wörter, sondern durch Zeichen ausgeführt werden. Diese Eigenschaft kann nützlich sein, wenn wir ein sehr langes Wort haben, das nicht in die angegebene Breite passt. Dies führt jedoch zu einer Art Unannehmlichkeit, da absolut alle Wörter Zeichen für Zeichen übertragen werden, auch diejenigen, die in die vorgegebene Breite passen.

Glücklicherweise gibt es eine ähnliche Eigenschaft, die nur Wörter überträgt, die nicht in Zeichen passen. Es heißt Overflow-Wrap:

P( overflow-wrap: break-word; )

und nach Anwendung des Break-Word-Werts wird unser gesamter Text Wort für Wort übertragen, und Wörter, die nicht in die angegebene Breite passen, werden Zeichen für Zeichen übertragen. Wir können sagen, die Aufgabe ist erledigt! Zusätzlich zum Break-Word-Wert akzeptiert diese Eigenschaft Folgendes:

Überlauf-Wrap: normal | Bruchwort | erben;

Kommen wir nun zu einer erweiterten CSS-Eigenschaft für den Zeilenumbruch im Text.

Betrachten wir die White-Space-Eigenschaft, mit der wir die Funktionsweise des Pre-Tags nachahmen können, ohne den Text selbst in Monospace zu ändern.

Leerzeichen: normal | nowrap | vor | Vorlinie | Vorverpackung | erben

Mit dieser Eigenschaft arbeiten wir grundsätzlich nur mit Leerzeichen im Text. Wenn wir beispielsweise den folgenden Stil auf unseren Text anwenden:

Leerraum: nowrap;

Alle Zeilenumbrüche werden ignoriert und unser Text wird als eine Zeile angezeigt.

Leerzeichen: pre;

Wenn der Wert pre ist, ähneln alle Zeilenumbrüche denen im Quellcode. Passt der Text außerdem nicht in die angegebene Breite, wird er nicht übertragen. Wenn wir möchten, dass es übertragen wird, müssen wir den Vorzeilenwert angeben.

Wenn wir nicht nur Zeilenumbrüche berücksichtigen wollen Quellcode, aber auch Leerzeichen zwischen Wörtern, dann müssen Sie Folgendes angeben:

Leerraum: vor dem Umbruch;

Das ist im Grunde alles, was ich Ihnen über die Silbentrennung von Wörtern sagen wollte mit CSS. Ich hoffe, dieser Artikel war für Sie nützlich und Sie werden die gewonnenen Erkenntnisse mehr als einmal nutzen.

Nun, ich verabschiede mich von dir. Ich wünsche Ihnen viel Erfolg und viel Glück! Tschüss!

Bestimmen Sie, wie lange Wörter umgebrochen werden:

  1. nur dort, wo ein Bindestrich, ein Leerzeichen oder die Eingabetaste vorhanden ist (ausgenommen geschütztes Leerzeichen und geschützter Bindestrich –). Zwischen Teilen eines Wortes wird ein Bindestrich (z. B. Rot-Gelb) und zwischen Wörtern ein Bindestrich geschrieben. „Weicher Bindestrich“ – erscheint nur, wenn eine Übertragung erforderlich ist. Wenn das Wort über das übergeordnete Wort hinausgeht, dann oder ​ überträgt seinen Teil ohne Zeile. Mathematische Ausdrücke verwenden ein Minuszeichen (z. B. 5 − 2). Bei Telefonnummern wird eine Ziffernleiste angezeigt (z. B. +7 800 000‒00‒00). Und das alles ist nicht dasselbe Bekannte wie auf der Tastatur.
  2. nach einem beliebigen Zeichen.
  3. nach den Regeln der russischen Sprache mit automatischer Verwendung eines Bindestrichs.

Überlaufverpackung
Zeilenumbruch
Wortbruch
Zeilenumbruch
Bindestriche

Unser einKilogramm wurde bereits erneut überprüft Heber-Bulldozer-Lader

lang="ru"lang="ru">unsere wurde bereits erneut überprüft - Kilogramm Entwurzeler-Bulldozer-Lader

Was ist der Unterschied zwischen einer Immobilie und einer anderen?

Standardmäßig werden lange Wörter nicht getrennt, sofern dies nicht ausdrücklich durch einen Bindestrich angegeben ist, und beginnen in einer neuen Zeile.

Um Bindestriche zu ignorieren, die für das Auge sofort sichtbar sind, fügen wir word-break: keep-all; .

Um zu verhindern, dass der Browser auf den weichen Bindestrich achtet, fügen Sie Bindestriche ein: none; .

Wenn ein Zeilenumbruch erforderlich ist, dann verwenden Sie word-wrap: break-word; Ich empfehle Ihnen, es immer zu verwenden, da es von allen Browsern verstanden wird. Es unterscheidet sich von Wort-Break: Break-All; , was Vorrang hat, da Wörter, die nicht in den Block passen, in einer neuen Zeile beginnen und die Empfehlung für weiche Bindestriche berücksichtigt wird.

Bei gemeinsamer Verwendung Wort-break: break-all; mit Bindestrichen: auto; Letzteres wird ignoriert. Bindestriche: auto; Die Platzierung von Bindestrichen liegt im eigenen Ermessen. Damit es funktioniert, müssen Sie jedoch Ihre Sprache angeben, indem Sie das Attribut lang="ru" im div angeben.

Umbrechen Sie Wörter nicht in einer anderen Zeile

Nehmen wir an, ein Menüelement oder eine Schaltfläche sieht nicht mehr gut aus, wenn sie auseinanderbricht. Daher muss ihre Trennung verboten werden. Dazu sollten alle oben genannten Eigenschaften auf den „Standard“-Modus gesetzt und hinzugefügt werden. Klicken Sie auf und schauen Sie sich unser Trainingsgelände an.

Kontrollieren Sie den Zeilenumbruch mit Bindestrichen: auto;

Tetrahydropyranylcyclopentyltetrahydropyridopyridin

TetrahydropyPyridino hoch

Hallo zusammen). Ich schreibe weiterhin über verschiedene nützliche Eigenschaften der CSS-Sprache, die auf die eine oder andere Weise beim Layout helfen können. Und heute möchte ich Ihnen sagen, wie es geht CSS-Übertragung Wörter, wenn sie nicht in ihren Behälter passen. Ich zeige Ihnen alles anhand eines realen Beispiels.

Aktivieren Sie die Silbentrennung für Wörter, die nicht passen

Nehmen wir an, ich habe einen Block mit einer Breite von 100 Pixeln und muss darin Text schreiben. Der Text enthält das Wort „ selbstextrahierend". So entsteht zum Beispiel ein Archiv) Aber darum geht es nicht. Das Wort ist sehr lang, es passt einfach nicht in die Breite des Containers. Schreiben wir es in einen so schmalen Block (100 Pixel). Was wird?

Wie Sie sehen, ist das arme Wort aus dem Container gekrochen, nun, es kann nirgendwo hingehen, was können Sie tun? Und das ohne Einzug. Hier kommt also die Eigenschaft des Zeilenumbruchs zum Einsatz. Folgendes müssen Sie für den Block festlegen, um den Zeilenumbruch darin zu aktivieren:

Zeilenumbruch: Wortumbruch;

Und um überzeugender zu sein, können Sie auch schreiben Polsterung(Polsterung). Nach der Anwendung der Eigenschaft sehen wir also, dass zu lange Wörter Buchstabe für Buchstabe in eine andere Zeile übertragen werden. Selbst wenn die zweite Zeile für das Wort nicht ausreicht, wird der Rest in die dritte usw. übertragen.

Ich möchte darauf hinweisen, dass die Immobilie ohne Angst genutzt werden kann. Erstens funktioniert es heutzutage hervorragend in Browsern. Zweitens funktioniert es intelligent. Für alle normalen Wörter gibt es nämlich keine Bindestriche; die gesamten Wörter werden in die nächste Zeile übertragen, sodass die Lesbarkeit nicht beeinträchtigt wird. Sie können es in diesem Screenshot sehen.

Wann ist Zeilenumbruch zu verwenden?

Eigentlich sehe ich bisher zwei Anwendungsfälle. Die erste Möglichkeit gilt nur für schmale Blöcke, bei denen Sie befürchten, dass lange Wörter unansehnlich über die Blockgrenzen hinausragen könnten. Im zweiten Fall wollte der Designer, dass der Site-Titel aus mehreren Zeilen besteht.

In diesem Artikel haben wir gelernt, wie man in CSS Wörter umbricht. Das ist alles für mich heute. Auf Wiedersehen.

Die Eigenschaft „white-space“ gibt an, wie Leerzeichen zwischen Wörtern angezeigt werden. IN normale Bedingungen Beliebig viele Leerzeichen im HTML-Code werden auf einer Webseite als eins angezeigt. Die Ausnahme ist das Element 

, wird der in diesem Container platzierte Text mit allen Leerzeichen so ausgegeben, wie er vom Benutzer formatiert wurde.  Der Leerraum simuliert also die Arbeit 
Im Gegensatz dazu wird die Schriftart jedoch nicht in Monospace geändert.
Brief Information
Bezeichnungen

BeschreibungBeispiel

<тип>
Gibt den Typ des Werts an.<размер>


A && BDie Werte müssen in der angegebenen Reihenfolge ausgegeben werden.<размер> && <цвет>


A |  BZeigt an, dass Sie nur einen der vorgeschlagenen Werte (A oder B) auswählen müssen.normal |  Small-Caps

Ein ||  BJeder Wert kann unabhängig oder zusammen mit anderen in beliebiger Reihenfolge verwendet werden.Breite ||  zählen


Gruppiert Werte.[ Zuschneiden ||  kreuzen ]

*
Null oder mehrmals wiederholen.[,<время>]*


+
Wiederholen Sie dies einmal oder mehrmals.<число>+


?
Der angegebene Typ, das Wort oder die Gruppe ist optional.Einsatz?

(A, B)Wiederholen Sie mindestens A, aber nicht mehr als B-Mal.<радиус>{1,4}


#
Wiederholen Sie dies einmal oder mehrmals, getrennt durch Kommas.<время>#


×
 
Werte
normal Der Text im Browserfenster wird wie gewohnt angezeigt, Zeilenumbrüche werden automatisch gesetzt.  nowrap Leerzeichen werden nicht berücksichtigt, Zeilenumbrüche im HTML-Code werden ignoriert, der gesamte Text wird in einer Zeile angezeigt;  gleichzeitig hinzufügen 
bricht den Text in eine neue Zeile um.  pre Der Text wird unter Berücksichtigung aller Leerzeichen und Bindestriche angezeigt, wie sie vom Entwickler im HTML-Code hinzugefügt wurden.  Wenn die Zeile zu lang ist und nicht in das Browserfenster passt, wird eine horizontale Bildlaufleiste hinzugefügt.  Vorzeilen-Leerzeichen werden im Text nicht berücksichtigt, der Text wird automatisch übernommen nächste Zeile, wenn es nicht in den angegebenen Bereich passt.  Vorumbruch Alle Leerzeichen und Umbrüche bleiben im Text erhalten, aber wenn die Breite der Zeile nicht in den angegebenen Bereich passt, wird der Text automatisch in die nächste Zeile umgebrochen.
Die Auswirkung von Werten auf den Text ist in der Tabelle dargestellt.  1.
Beispiel


 
 
 Leerraum
 
 
 
 
Beispiel

 

 
 
 Fermats letzter Satz

 X N+Y N= Z N
wobei n eine ganze Zahl > 2 ist






 
 

 








Das Ergebnis dieses Beispiels ist in Abb. dargestellt.  1.
Reis.  1. Anwenden der Leerraumeigenschaft
Objektmodell
Ein Objekt.style.whiteSpace
Notiz
Browser Internet Explorer Bis einschließlich Version 7.0 werden Pre-Line- und Pre-Wrap-Werte nicht unterstützt.  Für