Implementierung von erzwungenen Zeilenumbrüchen und keinen Zeilenumbrüchen in Containern wie div, td und p in HTML-Tags

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.

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

2. CSS umbricht automatisch

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

3. CSS erzwingt englische Wortzeilenumbrüche

p{word-break:break-all;}

Wenn p verschachtelt ist und Sie möchten, dass das innere p automatisch entsprechend dem Inhalt umbrochen wird, können Sie nur die Breite des äußeren p und white-spance:nowrap festlegen.

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 bei 200 Pixel umbrochen. Wenn am Ende der Zeile ein langes englisches Wort steht (Glückwunsch usw.), wird es abgeschnitten das Wort und verwandeln 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 „Zeilenumbruch: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.

word-break : normal | break-all | keep-all

Parameter:

normal: Gemäß den Textregeln asiatischer und nicht-asiatischer Sprachen sind Zeilenumbrüche innerhalb von Wörtern erlaubt

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: table-layout: auto |. 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 auch in Baidu-Snapshots zu Problemen führen – dieses Attribut des OPERA FIREFOX-Browsers unterstützt das Wortumbruch-Attribut nicht und kann durch Leerzeichen: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 vonImplementierung von erzwungenen Zeilenumbrüchen und keinen Zeilenumbrüchen in Containern wie div, td und p in HTML-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!