Was ist der Unterschied zwischen Zeilenumbruch und Zeilenumbruch in CSS?

Dieses Kapitel wird Ihnen den Unterschied zwischen Zeilenumbruch und Zeilenumbruch in CSS vorstellen. Es hat einen gewissen Referenzwert. Ich hoffe, es wird Ihnen hilfreich sein.

Was sind Zeilenumbrüche und Zeilenumbrüche? Sie können sich nur Zeilenumbrüche merken Das Ding wird verwendet, um Satzumbrüche zu erzwingen, oder vielleicht liegt es daran, dass diese beiden Dinge zu schwer auszusprechen sind und ähnlich aussehen, was es schwierig macht, sie sich zu merken.

Was sind sie dann? Ich habe die folgende Erklärung auf der offiziellen Website von Mozilla gefunden:

Wortumbruch

Wortumbruch

Wir sehen, dass Wörter wie Bruchlinien innerhalb von Wörtern in beiden Erklärungen vorkommen, was darauf hindeutet, dass sie mit Bruchlinien innerhalb von Wörtern zusammenhängen. Versuchen wir dann, die beiden obigen Absätze auf Englisch zu übersetzen:

Wortumbruch:

Das Zeilenumbruch-Attribut von CSS wird verwendet, um anzugeben, ob der Browser zulässig ist innerhalb eines Wortes liegen. Die Segmentierung wird durchgeführt, um einen Überlauf zu verhindern, wenn eine Zeichenfolge zu lang ist und ihr natürlicher Zeitraum nicht gefunden werden kann.

Wortumbruch:

Das Wortumbruch-Attribut von CSS wird verwendet, um anzugeben, wie Sätze innerhalb von Wörtern umgebrochen werden.

Es scheint, dass wir einige Unterschiede zwischen den beiden obigen Übersetzungen gefunden haben, die mühsam zu lesen sind: Beim Zeilenumbruch wird betont, ob Satzumbrüche innerhalb von Wörtern zulässig sind, während beim Wortumbruch betont wird, wie Sätze innerhalb von Sätzen umgebrochen werden Fragment.

Dennoch scheint es immer noch nicht ganz klar zu sein. Nun, Kinder mit schlechten Ausdrucksfähigkeiten können es sich nicht leisten, verletzt zu werden. Wir können nur einige Beispiele verwenden, um Abhilfe zu schaffen.

Was ist Intra-Wort-Segmentierung? Natürlich sind das alles spanische Wörter.

Dies ist der Fall ohne Intra-Wort-Segmentierung. Wir sehen, dass das Wort zu lang ist, sodass es über den Container hinausläuft, der es umschließt.

Dies ist der Fall der Satzsegmentierung innerhalb eines Wortes, d. h. ein Wort wird in zwei Zeilen segmentiert.

Zunächst einmal: Wenn kein Zeilenumbruch oder Zeilenumbruch hinzugefügt wird, ist dies die Standardeinstellung des Browsers. Wenn ein Wort so lang ist, dass der verbleibende Platz in einer Zeile nicht hineinpasst. Dann verschiebt der Browser das Wort in die nächste Zeile:

word..d Dieses von uns erstellte Wort sollte ursprünglich unmittelbar nach long stehen, aber nach long Es ist nicht genügend Platz vorhanden links, und Wörter können standardmäßig nicht umgebrochen werden, daher muss sich der Browser herablassen, sie nach unten zu verschieben.

Dieses lange Wort wird nicht als abnormal angesehen, da es zumindest nicht die Länge des Elements überschreitet, das es umschließt. Was aber, wenn es die Länge überschreitet?

Wenn es, wie bereits erwähnt, den Grenzwert überschreitet, läuft es außerhalb seines übergeordneten Containers über, da es zu diesem Zeitpunkt nicht abgeschnitten werden darf, also kann es nur ich rausstürmen.

Hier kommt der Zeilenumbruch zum Einsatz. Fügen wir diesem Text „Was ist der Unterschied zwischen Zeilenumbruch und Zeilenumbruch in CSS?:break-word“ hinzu und sehen, was passiert

Haha, komm zurück. Nun, es ist so ein Langes Wort, es macht nichts, wenn du es kaputt machst.

Um zu verhindern, dass lange Wörter überlaufen, werden darin Sätze gebrochen. Das ist es, was Was ist der Unterschied zwischen Zeilenumbruch und Zeilenumbruch in CSS?:break-word bewirkt.

Ein Blick auf die Browserunterstützung von Zeilenumbruch:

Sehr gut, fast alle Browser unterstützen es.

Okay, Sie können jetzt sagen, Sie haben bereits einen Zeilenumbruch, warum brauchen Sie also einen Zeilenumbruch?

Die bösen Kapitalisten wollen immer alles aus den Arbeitern herauspressen. Ist da nicht ein Leerzeichen nach dem Long im Bild unten? Was für eine Verschwendung. . .

Ja, es gibt genug Platz für mehrere kurze Wörter nach langen, es sind alles diese stinkenden und perversen langen Wörter!

Jadi IE memang bertimbang rasa, jangan memarahinya lagi, memandangkan masalah tidak membazir sedikit ruang, ia mencipta perkataan-break. Sekarang mari kita lihat apa yang berlaku apabila kita menggunakan Was ist der Unterschied zwischen Zeilenumbruch und Zeilenumbruch in CSS?:break-all;.

Lihat apa yang berlaku? Perkataan panjang yang diselewengkan tidak dialihkan ke baris seterusnya, tetapi diletakkan terus selepas panjang, dan kemudian diputuskan sambungan di sempadan kanan bekas induk. Jadi, ia tidak membazir ruang.

Mari kita lihat sokongan penyemak imbas untuk Was ist der Unterschied zwischen Zeilenumbruch und Zeilenumbruch in CSS?:break-all:

Kecuali opera, semua yang lain disokong (Firefox tidak pernah Sokongan telah ditukar kepada sokongan)!

Seperti yang kami katakan pada mulanya, Was ist der Unterschied zwischen Zeilenumbruch und Zeilenumbruch in CSS? digunakan untuk memutuskan sama ada untuk membenarkan pembahagian ayat dalam perkataan Jika tidak dibenarkan, perkataan yang panjang akan melimpah. Perkara yang paling penting ialah ia masih akan cuba beralih ke baris seterusnya terlebih dahulu untuk melihat sama ada lebar baris seterusnya adalah mencukupi. Jika tidak, ia akan membahagikan ayat dalam perkataan.

Dan Was ist der Unterschied zwischen Zeilenumbruch und Zeilenumbruch in CSS?:break-all adalah lebih tidak normal, kerana cara ia memecahkan ayat adalah sangat kasar. Ini juga boleh menjelaskan mengapa fungsinya untuk menentukan cara untuk memecahkan ayat, iaitu - menggunakan Was ist der Unterschied zwischen Zeilenumbruch und Zeilenumbruch in CSS?:break-all adalah bersamaan dengan menggunakan cara kasar untuk memecahkan ayat. Pendek kata, jika anda ingin menjimatkan lebih banyak ruang, hanya gunakan Was ist der Unterschied zwischen Zeilenumbruch und Zeilenumbruch in CSS?:break-all!

Tetapi dalam apa jua keadaan, pemecahan ayat dalam perkataan akan memberi kesan tertentu pada kebolehbacaan teks Barat Kadangkala anda perlu memberi perhatian kepada perkara ini.

ps: Sesetengah artikel di Internet mengatakan bahawa Was ist der Unterschied zwischen Zeilenumbruch und Zeilenumbruch in CSS?:break-word tidak berfungsi pada rentetan bahasa Inggeris yang panjang, ini adalah sangat salah Was ist der Unterschied zwischen Zeilenumbruch und Zeilenumbruch in CSS?:break-word rentetan panjang Bahasa Inggeris atau Nombor dibahagikan kepada beberapa baris. Sebenarnya, persamaan Was ist der Unterschied zwischen Zeilenumbruch und Zeilenumbruch in CSS?:break-word dan Was ist der Unterschied zwischen Zeilenumbruch und Zeilenumbruch in CSS?:break-semua ialah mereka boleh memecahkan perkataan yang panjang secara paksa menjadi ayat Perbezaannya ialah Was ist der Unterschied zwischen Zeilenumbruch und Zeilenumbruch in CSS?:break-word akan mula-mula memulakan baris baharu untuk meletakkan perkataan yang panjang Jika perkataan yang panjang masih tidak boleh diletakkan dalam baris baru, perkataan yang panjang akan dipaksa untuk memecahkan ayat: pecah-semua tidak akan meletakkan perkataan yang panjang dalam baris yang baru baris tidak boleh diletakkan, hukuman akan dipaksa untuk dipecahkan.

kod css:

.p1{
  background:#000; width:100px; color:#F00; Was ist der Unterschied zwischen Zeilenumbruch und Zeilenumbruch in CSS?:break-word
}
.p2{
  background:#000; width:100px; color:#F00; margin-top:10px; Was ist der Unterschied zwischen Zeilenumbruch und Zeilenumbruch in CSS?:break-all
}

Kod HTML:

<p class="p1" data-mce-style="background: #000; width: 100px; color: #f00; Was ist der Unterschied zwischen Zeilenumbruch und Zeilenumbruch in CSS?: break-word;">
haha 555555555555555555555555555555555
</p>
<p class="p2" data-mce-style="background: #000; width: 100px; color: #f00; margin-top: 10px; Was ist der Unterschied zwischen Zeilenumbruch und Zeilenumbruch in CSS?: break-all;">
haha 555555555555555555555555555555555
</p>

Di atas adalah keseluruhan kandungan bab ini, anda boleh cuba menyusunnya sendiri