ATOZ CSS Schneller Tipp: Verwenden von Witwen und Linienbrüchen-CSS-Tutorial-php.cn

AtoZ CSS Quick Tip: Using Widows and Line Breaks

Schlüsselpunkte

Vermeiden Sie die Verwendung von <code> -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> -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>
  这是一个很长的标题，应该<br>
  在这里换行
</h1>

Nach dem Login kopieren

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>这是一个很长的标题，
应该
在这里换行</code>

Nach dem Login kopieren

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> "Wickelzeilen", um Zeilen allein zu formen.

Nicht sehr gut.

Verwenden Sie keine <code> -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> -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> Tags, HTML wird für Inhalte und nicht für Stile verwendet.

Wann kann ich <code> Tag verwenden?

Im Allgemeinen versuche ich zu vermeiden, das <code> -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.

我还曾在网站页脚的段落中使用它们，作为快速添加版权信息的简便方法。

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

<h1>
  这是一个很长的标题，应该<br>
  在这里换行
</h1>

Nach dem Login kopieren

<code>这是否违反了我关于不使用换行符进行样式设计的规则？也许吧。我会批评自己的。 <code> Wird dies durch meine Regeln in Bezug auf Stildesign verletzt, ohne Zeilenpausen zu verwenden? Vielleicht. Ich werde mich kritisieren.

<code>display: none

Verwenden Sie

Neulinnern

<code>一个 <code> <code>标签的作用并不大（除了强制换行），并且没有任何视觉特征——你无法看到它们，它们没有任何形状、大小或颜色等等。

<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. <code>但是，您可以向其中一个添加一个类，并使用 <code>属性切换其换行能力。 <code> Sie können jedoch eine Klasse zu einer von ihnen hinzufügen und die Fähigkeit des Zeilenwechsels mithilfe der Eigenschaft display <code> wechseln. <code>设置 <code>将不会导致换行。设置 <code> <code>将导致换行。这在与媒体查询结合使用时偶尔很有用，可以在特定屏幕尺寸下启用或禁用换行。

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. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;code&gt;这是一个很长的标题，
应该
在这里换行&lt;/code&gt;</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div>

<code>这些代码片段将允许文本在窄屏幕设备上作为单行流动，但对于大屏幕，换行将可见，版权文本将显示在两行上。

<code> 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>回到我们这篇文章的开头，如果我们不应该使用 <code>标签来强制换行（并移除难看的寡妇行），那么我们应该使用什么呢？ <code> 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>

好吧，用不换行空格字符连接标题中的最后两个单词是确保文本以视觉上令人愉悦的方式流动和换行的一种更灵活的方法。请看以下标记：

<div class="site-footer">
  <p>
    由 Guy Routledge 深情创作<br>
    © 2016 保留所有权利
  </p>
</div>

Nach dem Login kopieren

<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>

我在“换行”和“在这里”这两个词之间添加了一个不换行空格，这使得它们的行为就像一个单词一样，而不是由空格分开的两个单词。

<code>如果屏幕很宽并且有足够的空间让整个标题显示在一行中，一切看起来都很好。 <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>如果减小屏幕宽度，第一个可用的换行点是在字符串“which”和字符串“wraps here”之间。这意味着如果没有足够的空间让整个标题在一行中显示，该行将换到两行，留下最后两个单词独自一行。没有寡妇行，一切看起来都很棒。

<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.

如果您想查看此技术的实际效果，您可以使用浏览器的开发者工具检查此页面上的标题。您还可以尝试调整窗口大小以查看每个标题中的单词是如何换行的。

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?

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!