Schlüsselpunkte

• Vermeiden Sie die Verwendung von <code><br> -Tags, um Zeilenverpackungen zu erzwingen, da dies den Text unter verschiedenen Bildschirmgr??en inkonsistent erscheint. CSS wird empfohlen, um den Abstand und die Linienbrüche zu steuern, was eine bessere Kontrolle und Flexibilit?t bietet.
• Verwenden Sie das Attribut <code>display, um Neuleitungen anzuzeigen oder auszublenden. Das Einstellen von <code>display: none erzeugt keinen Zeilenumbruch, w?hrend <code>display: block einen Linienbruch erzeugt. In Verbindung mit Medienabfragen k?nnen Linienbrüche in bestimmten Bildschirmgr??en aktiviert oder deaktiviert werden.
• Um Witwenzeilen (ein einzelnes Wort am Ende eines Absatzes oder eines Titels) zu vermeiden, verwenden Sie zwischen den letzten beiden W?rtern einen zeilenversteifenden Raumzeichen (<code> ). Dies stellt sicher, dass die letzten beiden W?rter als ein Wort verarbeitet werden, was einen sch?neren Zeilenbrenneffekt erzeugt.

Dieser Artikel ist Teil der ATOZ CSS -Serie. Hier finden Sie andere Artikel in der Serie.

Willkommen, den n?chsten Artikel in der Atoz CSS -Serie zu lesen! In dieser Serie werde ich verschiedene CSS -Werte (und Eigenschaften) untersuchen, die mit verschiedenen Buchstaben im Alphabet beginnen. Wir wissen, dass manchmal Screenshots nicht ausreichen, und in diesem Beitrag habe ich einen schnellen Tipp/einen schnellen Kurs über die Nutzung von Newlines und die Vermeidung von Witwenlinien hinzugefügt. W repr?sentiert die Witwenlinie und Linienbrüche

---

"Witwenzeile" bezieht sich auf ein Wort, das am Ende eines Absatzes oder Titels getrennt existiert.

Wenn das letzte Wort in der Textzeile aufgrund einer unzureichenden verfügbaren Breite in eine neue Zeile unterbricht, werden diese einzelnen W?rter angezeigt.

mindestens eine Zeile hat zwei W?rter, die visuell sch?ner sind, und diese Witwenlinien werden oft als unerwünscht angesehen. Eine Agentur, die ich einmal gearbeitet habe, war so w?hlerisch an ihnen, dass ich eine wenig Zwangsst?rung hatte, die sie nicht erschienen-nicht so viel in den Textabs?tzen, aber im Titel so viel wie m?glich vermieden.

Hier finden Sie einige Tipps zum Entfernen von Witwenlinien und zum Umgang mit Neulinen.

Vermeiden Sie die Verwendung von <code><br> -Tags, um die Linienverpackung zu erzwingen.

Wir k?nnen einen Zeilenumbruch erzwingen, indem wir dem HTML -Dokument ein Zeilenpausen -Tag hinzufügen und sicherstellen, dass der Text auf eine angenehme Weise ist.

<h1>
  這是一個(gè)很長(zhǎng)的標(biāo)題，應(yīng)該<br>
  在這里換行
</h1>

Dies mag auf Weitbildungsger?ten gro?artig aussehen, aber wenn der Bildschirm schmaler ist, k?nnen Zeilenumbrüche am falschen Ort erscheinen, wodurch der Text gebrochen aussieht. Zum Beispiel:

<code>這是一個(gè)很長(zhǎng)的標(biāo)題，
應(yīng)該
在這里換行</code>

Dies kann passieren, wenn die verfügbare Breite nur die Zeichenfolge "Dies ist ein sehr langer Titel" aufnehmen kann, "dies ist ein sehr langer Titel". Das Wort "Sollte" wickelt natürlich Linien ein und fordert dann <code><br> "Wickelzeilen", um Zeilen allein zu formen.

Nicht sehr gut.

Verwenden Sie keine <code><br> -Tags für den Abstand

Das sehe ich viele Anf?nger oft. Sie haben gerade HTML gelernt und wollten die Dinge voneinander trennen.

Dies kann durch manuelles Hinzufügen von leeren Zeilen mit dem <code><br> -Tag manuell hinzugefügt werden, aber der Abstand sollte immer von CSS behandelt werden. <code>margin Attribute bieten eine bessere Kontrolle als das Hinzufügen von Neulinen mit <code><br> Tags, HTML wird für Inhalte und nicht für Stile verwendet.

Wann kann ich <code><br> Tag verwenden?

Im Allgemeinen versuche ich zu vermeiden, das <code><br> -Tag zu verwenden.

Ich verwende wirklich nur Neuleitungen, wenn ich Gedichte markierst (obwohl das <code><code> -Tag hier m?glicherweise vorzuziehen ist, alle Neulisten und Einklagen zu bewahren). Ein weiterer Ort ist beim Markieren von E -Mail -Adressen.

<code> <code>

我還曾在網(wǎng)站頁(yè)腳的段落中使用它們，作為快速添加版權(quán)信息的簡(jiǎn)便方法。

Ich habe sie auch in den Fu?zeilenabs?tzen der Website verwendet, um schnell Urheberrechtsinformationen hinzuzufügen.

<h1>
  這是一個(gè)很長(zhǎng)的標(biāo)題，應(yīng)該<br>
  在這里換行
</h1>

<code><p>這是否違反了我關(guān)于不使用換行符進(jìn)行樣式設(shè)計(jì)的規(guī)則？也許吧。我會(huì)批評(píng)自己的。</p> <code> </p> Wird dies durch meine Regeln in Bezug auf Stildesign verletzt, ohne Zeilenpausen zu verwenden? Vielleicht. Ich werde mich kritisieren. <p>

<code>display: none

Verwenden Sie

Neulinnern

<code><p>一個(gè) <br> <code> <code>標(biāo)簽的作用并不大（除了強(qiáng)制換行），并且沒(méi)有任何視覺(jué)特征——你無(wú)法看到它們，它們沒(méi)有任何形狀、大小或顏色等等。

a

<code> Tags sind nicht sehr nützlich (mit Ausnahme von Zwangsleitungsunterbrechungen) und haben keine visuellen Merkmale - Sie k?nnen sie nicht sehen, sie haben keine Form, Gr??e, Gr??e oder Farbe usw. <p> <code><p>但是，您可以向其中一個(gè)添加一個(gè)類，并使用 <code>屬性切換其換行能力。</p> <code> </p> Sie k?nnen jedoch eine Klasse zu einer von ihnen hinzufügen und die F?higkeit des Zeilenwechsels mithilfe der Eigenschaft display <code> wechseln. <p> <code><p>設(shè)置 <code>將不會(huì)導(dǎo)致?lián)Q行。設(shè)置 <code> <code>將導(dǎo)致?lián)Q行。這在與媒體查詢結(jié)合使用時(shí)偶爾很有用，可以在特定屏幕尺寸下啟用或禁用換行。

Einstellungen Anzeige: Keine

Anzeige: Block verursacht einen Zeilenumbruch. Dies ist gelegentlich nützlich, wenn sie mit Medienabfragen verwendet werden, um Linienbrüche für bestimmte Bildschirmgr??en zu aktivieren oder zu deaktivieren. <pre class="brush:php;toolbar:false">&lt;code&gt;這是一個(gè)很長(zhǎng)的標(biāo)題， 應(yīng)該 在這里換行&lt;/code&gt;</pre>

<code><p>這些代碼片段將允許文本在窄屏幕設(shè)備上作為單行流動(dòng)，但對(duì)于大屏幕，換行將可見(jiàn)，版權(quán)文本將顯示在兩行上。</p>

<code> <p> Diese Code-Snippets lassen Text als einzelne Zeile auf schmalen Bildschirmger?ten flie?en, aber für gro?e Bildschirme werden Zeilenpausen sichtbar und urheberrechtlich geschützter Text werden in zwei Zeilen angezeigt. <h2> <code>

Verwenden Sie

Flexible Entfernung von Witwen <code><p>回到我們這篇文章的開頭，如果我們不應(yīng)該使用 <br> <code>標(biāo)簽來(lái)強(qiáng)制換行（并移除難看的寡婦行），那么我們應(yīng)該使用什么呢？</p> <code> </p> Zurück zum Beginn dieses Beitrags, wenn wir das

<code> -Tag nicht verwenden sollten, um einen Zeilenumbruch zu erzwingen (und h?ssliche Witwenzeilen zu entfernen), dann sind wir dann Sollte, was zu bedienen ist? <code>

好吧，用不換行空格字符連接標(biāo)題中的最后兩個(gè)單詞是確保文本以視覺(jué)上令人愉悅的方式流動(dòng)和換行的一種更靈活的方法。請(qǐng)看以下標(biāo)記：

<div class="site-footer">
  <p>
    由 Guy Routledge 深情創(chuàng)作<br>
    ? 2016 保留所有權(quán)利
  </p>
</div>

<code>

Nun, das Verbinden der letzten beiden W?rter im Titel ohne Space -Space -Zeichen ist eine flexiblere M?glichkeit, um sicherzustellen, dass der Text flie?t und die Zeilen visuell ansprechend bricht. Bitte beachten Sie die folgenden Tags: <code>

我在“換行”和“在這里”這兩個(gè)詞之間添加了一個(gè)不換行空格，這使得它們的行為就像一個(gè)單詞一樣，而不是由空格分開的兩個(gè)單詞。

<code><p>如果屏幕很寬并且有足夠的空間讓整個(gè)標(biāo)題顯示在一行中，一切看起來(lái)都很好。</p> <code>

Ich habe einen nicht-line-Wrap-Speicherplatz zwischen den beiden W?rtern "Newline" und "Here" hinzugefügt, wodurch sie sich wie ein Wort verhalten, anstatt zwei durch Leerzeichen ein Wort getrennt.

<code><p>如果減小屏幕寬度，第一個(gè)可用的換行點(diǎn)是在字符串“which”和字符串“wraps here”之間。這意味著如果沒(méi)有足夠的空間讓整個(gè)標(biāo)題在一行中顯示，該行將換到兩行，留下最后兩個(gè)單詞獨(dú)自一行。沒(méi)有寡婦行，一切看起來(lái)都很棒。</p>

<code> Alles sieht gut aus, wenn der Bildschirm breit ist und es genügend Platz für den gesamten Titel ist, um in einer Zeile angezeigt zu werden. <code> Wenn die Bildschirmbreite reduziert ist, liegt der erste verfügbare Zeilenunterbrechungspunkt zwischen der Zeichenfolge "und der Zeichenfolge" Wickeln hier ". Dies bedeutet, dass die Linie in zwei Zeilen ausgetauscht wird, wenn der gesamte Titel nicht genügend Platz gibt, um in einer Zeile zu erscheinen, und die letzten beiden W?rter in Ruhe lassen. Ohne eine Witwe sieht alles gut aus.

<code> <code>

如果您想查看此技術(shù)的實(shí)際效果，您可以使用瀏覽器的開發(fā)者工具檢查此頁(yè)面上的標(biāo)題。您還可以嘗試調(diào)整窗口大小以查看每個(gè)標(biāo)題中的單詞是如何換行的。

Wenn Sie sehen m?chten, wie diese Technologie tats?chlich funktioniert, k?nnen Sie den Titel auf dieser Seite mit den Entwicklertools des Browsers überprüfen. Sie k?nnen auch versuchen, die Gr??e des Fensters zu ?ndern, um zu sehen, wie W?rter in jedem Titel verpackt sind.

FAQs über CSS -Witwenlinien und bricht

Was ist der Unterschied zwischen einer Witwe und einer gestohlenen Person in CSS?

In CSS beziehen sich Witwe Zeilen und Waisenreihen am Anfang oder am Ende eines Absatzes auf Zeilen, die oben oder unten in einer Spalte h?ngen und vom Rest des Absatzes getrennt sind. "Witwe's Row" bezieht sich auf die Zeile am Ende des Absatzes, der am Anfang der n?chsten Seite oder Spalte f?llt und daher vom Rest des Textes getrennt ist. "Orphan" bezieht sich auf die Zeile am Anfang eines Absatzes, der alleine am Ende einer Seite oder einer Spalte erscheint.

Wie steuert man Witwen und Waisen in CSS?

cs Standardm??ig wird ihr Wert auf 2 gesetzt, was bedeutet, dass mindestens zwei Zeilen im Absatz oben oder unten auf der Seite bleiben. Sie k?nnen diese Werte nach Bedarf einstellen.

Was ist das "Zeilenaufbruch" -attribut in CSS?

Die Eigenschaft "Linienbrüche" in CSS gibt an, wie man chinesische, japanische oder koreanische (CJK) Text einpackt. Es kann Werte wie "automatisch", "locker", "normal" oder "streng" annehmen. Jeder Wert bestimmt, wie Linien in verschiedenen Situationen einwickelt werden und die Kontrolle über das Layout und die Lesbarkeit des CJK -Textes erm?glichen.

Wie wirkt sich das Attribut "Zeilenumbruch" auf Nicht-CJK-Text aus?

Das Attribut "Zeilenumbruch" hat keinen Einfluss auf den Nicht-CJK-Text. Für den Nicht-CJK-Text werden Zeilenpausen durch das Attribut "White-Space" und das Attribut "Word-Break" gesteuert.

Kann ich die Eigenschaften "Witwen" und "Orphans" für Webseiten verwenden?

Obwohl die Eigenschaften der "Witwen" und "Orphans" Teil der CSS -Spezifikation sind, wurden sie ursprünglich für Paging -Medien wie den Druck ausgelegt. Derzeit unterstützen nur wenige Browser diese Eigenschaften für Webseiten. Daher ist die Verwendung in Weblayouts begrenzt und wird nicht allgemein empfohlen.

Was sind die Alternativen zur Steuerung der Witwenzeilen im Webseite?

Es gibt einige Techniken zur Steuerung der Witwenzeilen in Webseiten -Layouts. Eine gemeinsame Methode besteht darin, Linienspaces () zwischen den letzten beiden W?rtern eines Absatzes zu verwenden. Dies stellt sicher, dass die letzten beiden W?rter zusammenhalten und nicht getrennt werden. Eine andere M?glichkeit besteht darin, Witwenzeilen dynamisch mit JavaScript oder JQuery zu verhindern.

Wie kann man Linienverpackung in CSS verhindern?

Sie k?nnen die Linienbrüche in CSS verhindern, indem Sie die Eigenschaft "White-Space" mit dem Wert "nowrap" verwenden. Dadurch wird verhindert, dass der Text in die n?chste Zeile einwickelt und ihn zwingt, in einer einzigen Zeile zu bleiben.

Wie kann man einen Linienbruch in CSS erzwingen?

<br> Ja, Sie k?nnen einen Zeilenumbruch in CSS erzwingen, indem Sie das HTML-Element "

" oder das Attribut "Inhalt" mit dem "A-Wert in" nach "oder" vor "Pseudo- verwenden. Element.

Wie wirkt sich das Attribut "Zeilenumbruch" auf das Layout des CJK-Textes aus?

Das Attribut "Zeilenumbruch" beeinflusst das Layout und die Lesbarkeit des CJK-Textes erheblich. Zum Beispiel verhindert der "strenge" Wert, dass bestimmte Zeichen am Ende oder Beginn einer Zeile erscheinen, wodurch der Text leichter zu lesen ist. Es kann jedoch auch mehr ungleiche L?ngen verursachen.

Was ist der Standardwert des "Zeilenaufbruchs" -attributs?

Der Standardwert des Attributs "Zeilenausbruch" ist "automatisch". Dies bedeutet, dass der Browser die Regeln für die Linienverbreitung basierend auf den Standardregeln für Linienleitungsleitungen ermittelt, die zwischen den Browsern variieren k?nnen.

Das obige ist der detaillierte Inhalt vonATOZ CSS Schneller Tipp: Verwenden von Witwen und Linienbrüchen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!