So implementieren Sie erzwungene Zeilenumbrüche und keine Zeilenumbrüche in div, td, p und anderen Containern in HTML

Erzwungene Zeilenumbrüche oder keine Zeilenumbrüche in p, td, p und anderen Containern sind in manchen Fällen recht praktisch. Der folgende Artikel hat einige relevante Kenntnisse zusammengestellt und enthält spezifische Implementierungsmethoden. 1. Erzwingen Sie keine Zeilenumbrüche und schließen Sie mit Auslassungspunkten ab.

Der Code lautet wie folgt:

<p style="width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;" > 
你好朋友朋友朋友我为什么不能看到效果啊 
</p>

2. Automatischer CSS-Zeilenumbruch

Der Code lautet wie folgt:

p{ word-wrap: break-word; word-break: normal; }

3. Der CSS-Code für den englischen Wortzeilenumbruch

lautet wie folgt:

p{word-break:break-all;}

Wenn p verschachtelt ist und Sie möchten Damit das innere p automatisch entsprechend dem Inhalt umbrochen wird, können Sie es einfach festlegen. Die p-Breite der äußeren Ebene kann auf white-spance:nowrap eingestellt werden.

word-break:break-all und word-wrap:break-word ermöglichen beide, dass der Inhalt seines Containers wie p automatisch umbrochen wird.

Ihr Unterschied ist:

1, word-break:break-all Wenn p beispielsweise 200 Pixel breit ist, wird der Inhalt automatisch auf 200 Pixel umbrochen. Wenn am Ende der Zeile ein langes englisches Wort steht (Glückwunsch usw.), wird es abgeschnitten das Wort und wandeln Sie es in die Zeile „Das Ende“ ist „conra“ (der vordere Teil der Glückwünsche) und die nächste Zeile ist der hintere Teil der „tulation“ (conguatulation).

2. Das Beispiel „Wortumbruch:Wortumbruch“ ist das gleiche wie oben, der Unterschied besteht jedoch darin, dass das gesamte Wort als Ganzes angezeigt wird Das gesamte Wort wird automatisch in die nächste Zeile eingefügt, ohne das Wort abzuschneiden.

3, word-break;break-all Unterstützte Version: IE5 oder höher Dieses Verhalten ist das gleiche wie in 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.

WORD-WRAP:break-word Unterstützte Version: IE5.5 oder höher Der Inhalt wird innerhalb der Grenze umgebrochen.

Bei Bedarf erfolgt auch ein Wortumbruch. Der Tisch wird automatisch umwickelt, um eine Dehnung zu vermeiden.

Wortumbruch: normal |. break-all |. Parameter:

normal: Gemäß den Textregeln asiatischer und nichtasiatischer Sprachen , erlaubt innerhalb von Wörtern Zeilenumbruch

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: Gleich wie normal für alle nicht-asiatischen Sprachen. Für Chinesisch, Koreanisch und Japanisch sind Wortumbrüche nicht zulässig. Syntax geeignet für nicht-asiatischen Text, der eine kleine Menge asiatischen Text enthält:

Zeilenumbruch: normal | Wortumbruch

Parameter:

normal: Inhalt zulassen Durchbrechen Sie die angegebenen Containergrenzen.

break-word: Der Inhalt wird innerhalb der Grenzen unterbrochen. Bei Bedarf erfolgt auch ein Wortumbruch. Beschreibung: Legt fest oder ruft ab, ob die Zeile umgebrochen werden soll, wenn die aktuelle Zeile die Grenze des angegebenen Containers überschreitet. Die entsprechende Skriptfunktion von

ist wordWrap. Bitte sehen Sie sich andere Bücher an, die ich geschrieben habe. Syntax: Tabellenlayout: auto |. Fixed Parameter: auto: Standardmäßiger automatischer Algorithmus. Das Layout basiert auf dem Inhalt jeder Zelle. Die Tabelle wird erst angezeigt, wenn jede Zelle gelesen und berechnet wurde. Sehr langsam behoben: Layout-Algorithmus korrigiert. Bei diesem Algorithmus basiert das horizontale Layout nur auf der Breite der Tabelle, der Breite des Tabellenrandes, dem Zellenabstand und der Breite der Spalten und hat nichts mit dem Inhalt der Tabelle zu tun. Beschreibung: Festlegen oder rufen Sie den Layout-Algorithmus der Tabelle ab. Das entsprechende Skriptattribut ist tableLayout.

Vorschlag: Die 3C-Erkennung von Wortumbrüchen führt zu Problemen, die zu Problemen in Baidu-Snapshots führen – dieses Attribut Der OPERA FIREFOX-Browser unterstützt das Wortumbruch-Attribut nicht und kann durch „white-space:normal“ ersetzt werden. , damit die Zeilenumbrüche unter FireFox und IE korrekt sind, und es ist zu beachten, dass die Leerzeichen zwischen Wörtern nicht zum Ersetzen verwendet werden können, da sonst die Zeilenumbrüche nicht korrekt sind.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie erzwungene Zeilenumbrüche und keine Zeilenumbrüche in div, td, p und anderen Containern in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!