Wenn Sie das DivCSS-Layout erstellen, müssen Sie den Text kontrollieren. Heute werde ich es Ihnen systematisch vorstellen. Es gibt in CSS vier Eigenschaften, die Zeilenumbrüche steuern.
1. Leerraum
Sie können den Effekt von PRE-Tags in HTML und den noWrap-Effekt von Zellen erzielen.
Grammatik:
Leerraum: normal vor Nowrap
Wert:
normal: Standardwert. Standardverarbeitungsmethode. Text verarbeitet Zeilenumbrüche automatisch. Wenn die Containergrenze erreicht ist, wird der Inhalt in die nächste Zeile verschoben
pre: Zeilenumbrüche und andere Leerzeichen werden geschützt. Dieser Wert erfordert die Deklaration von IE6+ oder !DOCTYPE als standardkonforme Modusunterstützung. Wenn die !DOCTYPE-Deklaration keinen standardkonformen Modus angibt, kann dieses Attribut verwendet werden, hat jedoch keine Auswirkung. Das Ergebnis entspricht dem Normalwert. Siehe Vorobjekt
nowrap: Erzwingt die Anzeige des gesamten Textes in derselben Zeile, bis das Ende des Textes erreicht ist oder ein br-Objekt gefunden wird. Siehe noWrap-Attribut
veranschaulichen:
Legt fest oder ruft ab, wie Leerzeichen innerhalb eines Objekts behandelt werden.
Leerzeichen wie Zeilenumbrüche, Leerzeichen und TAB werden in HTML-Dokumenten standardmäßig ignoriert. Wenn diese Eigenschaft auf „Normal“ oder „Nowrap“ festgelegt ist, können Sie die benannte Entität ohne Zeilenumbruch zum Hinzufügen von Leerzeichen und das Element „br“ zum Hinzufügen von Zeilenumbrüchen verwenden. Diese Eigenschaft hat die gleiche Auswirkung auf Inhalte, die Sie mit dem Document Object Model (DOM) manipulieren, wie auf Inhalte, die vom IE angezeigt werden.
Diese Eigenschaft funktioniert bei Blockobjekten.
Verwandte Stile:
Textüberlauf
Durch die Kombination mit Leerzeichen entfällt die Notwendigkeit, ein Programm zur Bestimmung der Länge einer Zeichenfolge zu schreiben. Klicken Sie hier, um ein Beispiel anzuzeigen.
Grammatik:
Textüberlauf: Clip-Auslassungspunkte
Wert:
Clip: Standardwert. Zeigt keine Auslassungsmarkierungen (…) an, sondern lediglich Ausschnitte
Auslassungspunkte: Zeigt ein Auslassungszeichen (…) an, wenn der Text im Objekt überläuft
veranschaulichen:
Legt fest oder ruft ab, ob ein Auslassungszeichen (...) verwendet werden soll, um den Textüberlauf innerhalb des Objekts zu markieren.
Diese Eigenschaft wirkt sich nur auf den Überlauf von normalem westlichen Text in horizontaler Inline-Richtung aus. Ein Inline-Überlauf tritt auf, wenn der Text innerhalb einer Zeile die verfügbare Breite überschreitet und kein Umbruch möglich ist.
Um einen Überlauf zu erzwingen und den Ellipsenwert anzuwenden, muss der Autor die White-Space-Eigenschaft des Objekts auf nowrap setzen.
Wenn keine Möglichkeit für Zeilenumbrüche besteht (z. B. die Breite des Objektcontainers ist schmal und es gibt einen langen Text ohne sinnvolle Zeilenumbrüche), kann es zu einem Überlauf kommen, ohne dass Nowrap angewendet wird.
Damit der Auslassungspunktwert angewendet werden kann, muss diese Eigenschaft auf ein Objekt festgelegt werden, das über einen unsichtbaren Bereich verfügt. Die beste Option besteht darin, die Überlaufeigenschaft auf „Ausgeblendet“ zu setzen. Diese Eigenschaft wird auch angewendet, wenn die Überlaufeigenschaft auf scrollen oder automatisch eingestellt wird. Es werden jedoch Bildlaufleisten angezeigt.
Durch Auswahl des Auslassungszeichens kann ausgeblendeter Text ausgewählt werden. Bei der Auswahl wird das Auslassungszeichen ausgeblendet und durch Text ersetzt.
Dieses Attribut bietet eine effiziente Möglichkeit, Auslassungsmarkierungen in DHTML zu erstellen.
2. Wortbruch
Die am häufigsten verwendete Eigenschaft zur Steuerung des Zeilenumbruchs wird häufig in Kombination mit dem Zeilenumbruch unten verwendet.
Grammatik:
Wortumbruch: Normales Umbrechen-Alles-Alles-Behalten
Wert:
normal: Standardwert. Erlauben Sie Zeilenumbrüche zwischen Wörtern
break-all: Dieses Verhalten ist das gleiche wie bei asiatischen Sprachen üblich. Pausen innerhalb eines beliebigen Wortes einer Textzeile in einer nicht-asiatischen Sprache sind ebenfalls zulässig. Dieser Wert eignet sich für asiatischen Text, der nicht-asiatischen Text enthält
keep-all: Dasselbe wie normal für alle nicht-asiatischen Sprachen. Für Chinesisch, Koreanisch und Japanisch sind Wortumbrüche nicht zulässig. Geeignet für nicht-asiatischen Text mit einer kleinen Menge asiatischen Texts
veranschaulichen:
Legt das Zeilenumbruchverhalten für Text innerhalb eines Objekts fest oder ruft es ab. Vor allem, wenn mehrere Sprachen auftauchen.
Für Chinesisch sollte Break-All verwendet werden. [Seite ausschneiden]
3. Zeilenumbruch
Wenn die von Ihnen entworfene Webseite in der Breite nicht adaptiv ist, müssen Sie sie auf „Wortumbruch“ einstellen, andernfalls wird die Seite möglicherweise gestaffelt.
Grammatik:
Zeilenumbruch: normales Umbruchwort
Wert:
normal: Standardwert. Erlauben Sie, dass sich der Inhalt über die angegebenen Containergrenzen hinaus erstreckt
Break-Wort: Inhalte werden innerhalb von Grenzen gebrochen. Bei Bedarf erfolgt auch ein Wortumbruch
veranschaulichen:
Legt fest oder ruft ab, ob die Zeile unterbrochen werden soll, wenn die aktuelle Zeile die Grenze des angegebenen Containers überschreitet.
Diese Eigenschaft funktioniert nur bei Layoutobjekten, z. B. Blockobjekten. Um dieses Attribut für Inline-Elemente zu verwenden, müssen Sie zunächst das Höhen- oder Breitenattribut des Objekts festlegen oder das Positionsattribut auf „absolut“ oder das Anzeigeattribut auf „Block“ festlegen.
4. Überlauf, Überlauf-x, Überlauf-y
Dies ist keine strenge Steuerung des Zeilenumbruchstils, aber die Einstellung auf „Ausgeblendet“ kann die Mängel des Zeilenumbruchs zu bestimmten Zeiten beheben. Beispielsweise möchten Sie nur eine Textzeile innerhalb der begrenzten Breite, aber der Länge dieser Zeile anzeigen Wenn der Text diese Breite überschreitet, können in Kombination mit Leerraum und Textüberlauf bessere Ergebnisse erzielt werden.
Grammatik:
Überlauf: sichtbarer, automatisch ausgeblendeter Bildlauf
Wert:
sichtbar: Standardwert. Schneidet keine Inhalte aus und fügt keine Bildlaufleisten hinzu. Wenn dieser Standardwert explizit deklariert wird, wird das Objekt auf die Abmessungen des enthaltenden Fensters oder Rahmens zugeschnitten. Und die Einstellung des Clip-Attributs ist ungültig
auto: Der Objektinhalt wird zugeschnitten oder es werden Bildlaufleisten angezeigt, wenn nötig
Versteckt: Inhalte, die die Objektgröße überschreiten, werden nicht angezeigt
scroll: Bildlaufleisten immer anzeigen
veranschaulichen:
Ruft ab oder legt fest, wie der Inhalt des Objekts verwaltet wird, wenn es seine angegebene Höhe und Breite überschreitet.
Der Standardwert für alle Objekte ist sichtbar, mit Ausnahme von Textbereichsobjekten und Körperobjekten, bei denen der Standardwert auto ist. Wenn Sie diesen Eigenschaftswert eines Textarea-Objekts auf „hidden“ setzen, werden dessen Bildlaufleisten ausgeblendet.
Wenn bei Tabellen das Attribut „table-layout“ auf „fixed“ gesetzt ist, unterstützt das td-Objekt das Attribut „overflow“ mit dem Standardwert „hidden“. Bei der Einstellung „Scrollen“ oder „Automatisch“ werden Inhalte, die die TD-Größe überschreiten, abgeschnitten. Bei der Einstellung „Sichtbar“ wird zusätzlicher Text in die Zellen rechts oder links überlaufen (je nach Einstellung der Richtungseigenschaft).
Diese Eigenschaft ist auf MAC-Plattformen ab IE5 verfügbar.
Ab IE6 kann dieses Attribut auf HTML-Objekte angewendet werden, wenn Sie mithilfe der !DOCTYPE-Deklaration den standardkonformen Modus angeben.