Points clés

• évitez d'utiliser des balises <code><br> pour forcer l'enveloppement des lignes, car cela entra?nera une apparence de texte incohérente sous différentes tailles d'écran. CSS est recommandé pour contr?ler l'espacement et les pauses de ligne, ce qui offre un meilleur contr?le et une meilleure flexibilité.
• Utilisez l'attribut <code>display pour afficher ou masquer les nouvelles lignes. Le réglage <code>display: none ne produira pas de rupture de ligne, tandis que <code>display: block produira une rupture de ligne. En conjonction avec les requêtes multimédias, les ruptures de ligne peuvent être activées ou désactivées sous des tailles d'écran spécifiques.
• Pour éviter les lignes de veuve (un seul mot à la fin d'un paragraphe ou d'un titre), utilisez un personnage d'espace révolutionnaire (<code> ) entre les deux derniers mots. Cela garantit que les deux derniers mots sont traités comme un mot, créant un plus beau effet de rupture de ligne.

Cet article fait partie de la série Atoz CSS. Vous pouvez trouver d'autres articles de la série ici.

Bienvenue pour lire le prochain article de la série Atoz CSS! Dans cette série, j'explorerai diverses valeurs (et propriétés) de CSS qui commencent par différentes lettres dans l'alphabet. Nous savons que parfois les captures d'écran ne sont pas suffisantes, et dans ce post, j'ai ajouté un astuce / cours rapide sur la mise en tir de New Lines et pour éviter les lignes de veuve. W représente la ligne de la veuve et la pause de ligne

---

"La ligne de la veuve" fait référence à un mot qui existe séparément à la fin d'un paragraphe ou d'un titre.

Lorsque le dernier mot de la ligne de texte se casse à une nouvelle ligne en raison de la largeur disponible insuffisante, ces mots individuels appara?tront.

Au moins une ligne a deux mots plus beaux visuellement, et ces lignes de veuve sont souvent considérées comme indésirables. Une agence pour laquelle je travaillais une fois était si pointilleuse à leur sujet que j'avais un peu de trouble obsessionnel-compulsif qu'ils n'apparaissaient pas - pas beaucoup dans les paragraphes de texte, mais ont évité autant que possible dans le titre.

Voici quelques conseils sur la suppression des lignes de veuve et la manipulation de Newlines.

évitez d'utiliser des balises <code><br> pour forcer la pellicule de ligne.

Nous pouvons forcer une rupture de ligne en ajoutant une étiquette de rupture de ligne au document HTML et nous assurer que le texte est agréable.

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

Cela peut avoir fière allure sur les appareils à écran large, mais si l'écran est plus étroit, les ruptures de ligne peuvent appara?tre au mauvais endroit, ce qui fait que le texte a l'air cassé. Par exemple:

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

Cela peut se produire si la largeur disponible ne peut maintenir que la cha?ne "Ceci est un très long titre", " Le mot ?devrait? envelopperait naturellement les lignes, puis forcé <code><br> fera en sorte que les ?lignes d'enveloppement ici? forment des lignes seules.

pas très bon.

N'utilisez pas de balises <code><br> pour l'espacement

C'est quelque chose que je vois beaucoup d'étudiants novices qui font souvent. Ils ont juste appris HTML et voulaient commencer à se séparer les uns des autres;

Cela peut être fait en ajoutant manuellement des lignes vierges à l'aide de la balise <code><br>, mais l'espacement doit toujours être géré par CSS. Les attributs <code>margin offrent un meilleur contr?le que l'ajout de nouvelles lignes à l'aide de balises <code><br>, le HTML est utilisé pour le contenu, pas les styles.

Quand puis-je utiliser la balise <code><br>?

D'une manière générale, j'essaie d'éviter d'utiliser la balise <code><br>.

J'utilise vraiment Newlines uniquement lors du marquage des poèmes (bien que la balise <code><code> ici puisse être préférable pour préserver toutes les nouvelles lignes et retraits). Un autre endroit est lors du marquage des adresses e-mail.

<code> <code>

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

Je les ai également utilisés dans les paragraphes de pied de page du site Web comme un moyen facile d'ajouter rapidement des informations sur le droit d'auteur.

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

<code><p>這是否違反了我關(guān)于不使用換行符進(jìn)行樣式設(shè)計(jì)的規(guī)則？也許吧。我會(huì)批評(píng)自己的。</p> <code> </p> Est-ce que cela violait mes règles concernant la conception du style sans utiliser de pauses en ligne? Peut être. Je vais me critiquer. <p>

<code>display: none

Utiliser

Masquer Newlines

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

a

<code> Les balises ne sont pas très utiles (sauf pour les pauses de ligne forcées) et n'ont pas de fonctionnalités visuelles - vous ne pouvez pas les voir, ils n'ont aucune forme, taille ou couleur, etc. <p> <code><p>但是，您可以向其中一個(gè)添加一個(gè)類，并使用 <code>屬性切換其換行能力。</p> <code> </p> Cependant, vous pouvez ajouter une classe à l'un d'eux et changer sa capacité d'emballage de ligne à l'aide de la propriété afficher <code>. <p> <code><p>設(shè)置 <code>將不會(huì)導(dǎo)致?lián)Q行。設(shè)置 <code> <code>將導(dǎo)致?lián)Q行。這在與媒體查詢結(jié)合使用時(shí)偶爾很有用，可以在特定屏幕尺寸下啟用或禁用換行。

Paramètres Affichage: Aucun

Affichage: Block <code> provoquera une rupture de ligne. Ceci est parfois utile lorsqu'il est utilisé avec des requêtes multimédias, activant ou désactivant les ruptures de ligne pour des tailles d'écran spécifiques. <pre class="brush:php;toolbar:false">&lt;code&gt;這是一個(gè)很長的標(biāo)題， 應(yīng)該 在這里換行&lt;/code&gt;</pre>

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

<code> <p> Ces extraits de code permettront au texte de circuler en une seule ligne sur des appareils à écran étroit, mais pour les grands écrans, les ruptures de ligne seront visibles et le texte protégé par le droit d'auteur sera affiché sur deux lignes. <h2> <code>

Utiliser

Retrait flexible des veuves <code><p>回到我們這篇文章的開頭，如果我們不應(yīng)該使用 <br> <code>標(biāo)簽來強(qiáng)制換行（并移除難看的寡婦行），那么我們應(yīng)該使用什么呢？</p> <code> </p> Retour au début de ce post, si nous ne devons pas utiliser la balise

<code> pour forcer une rupture de ligne (et supprimer les lignes de veuve laides), alors nous Doit quoi utiliser? <code>

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

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

<code>

Eh bien, rejoindre les deux derniers mots du titre sans caractères d'espace de rupture de ligne est un moyen plus flexible de s'assurer que le texte coule et les lignes se casse de manière visuellement agréable. Veuillez consulter les balises suivantes: <code>

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

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

J'ai ajouté un espace d'enveloppement non linéaire entre les deux mots "Newline" et "ici", ce qui les fait se comporter comme un mot, plut?t que deux séparés par des espaces un mot. <p> <code><p>如果減小屏幕寬度，第一個(gè)可用的換行點(diǎn)是在字符串“which”和字符串“wraps here”之間。這意味著如果沒有足夠的空間讓整個(gè)標(biāo)題在一行中顯示，該行將換到兩行，留下最后兩個(gè)單詞獨(dú)自一行。沒有寡婦行，一切看起來都很棒。</p>

<code> Tout semble bon si l'écran est large et qu'il y a suffisamment de place pour que tout le titre apparaisse dans la ligne. <code> Si la largeur de l'écran est réduite, le premier point de rupture de ligne disponible est entre la cha?ne "qui" et la cha?ne "s'enroule ici". Cela signifie que s'il n'y a pas assez d'espace pour que tout le titre apparaisse sur une seule ligne, la ligne sera échangée sur deux lignes, laissant les deux derniers mots seuls. Tout a l'air super sans veuve.

<code> <code>

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

Si vous souhaitez voir comment cette technologie fonctionne réellement, vous pouvez vérifier le titre sur cette page à l'aide des outils de développeur du navigateur. Vous pouvez également essayer de redimensionner la fenêtre pour voir comment les mots de chaque titre sont enveloppés.

FAQ sur les lignes de veuve CSS et les ruptures

Quelle est la différence entre une veuve et une personne volée en CSS?

En CSS, les lignes de veuve et les lignes orphelines se réfèrent aux lignes au début ou à la fin d'un paragraphe, suspendu en haut ou en bas d'une colonne, séparée du reste du paragraphe. "Widow's Row" fait référence à la ligne à la fin du paragraphe, qui tombe au début de la page ou de la colonne suivante, et est donc séparée du reste du texte. "Orphan" fait référence à la ligne au début d'un paragraphe qui appara?t seul au bas d'une page ou d'une colonne.

Comment contr?ler les veuves et les orphelins dans CSS?

CSS fournit des propriétés appelées "veuves" et "orphelins" pour contr?ler le nombre minimum de lignes qui peuvent être laissées en haut ou en bas de la page dans un paragraphe. Par défaut, leur valeur est définie sur 2, ce qui signifie qu'au moins deux lignes dans le paragraphe resteront en haut ou en bas de la page. Vous pouvez ajuster ces valeurs au besoin.

Quel est l'attribut "Break-Break" dans CSS?

La propriété "briser" dans CSS spécifie comment envelopper le texte chinois, japonais ou coréen (CJK). Il peut prendre des valeurs telles que "auto", "lache", "normale" ou "strict". Chaque valeur détermine comment envelopper les lignes dans différentes situations, permettant le contr?le de la disposition et de la lisibilité du texte CJK.

Comment l'attribut "briser" "affecte-t-il le texte non-CJK?

L'attribut "rupture" n'a aucun effet sur le texte non-CJK. Pour le texte non-CJK, les pauses de ligne sont contr?lées par l'attribut "White Space" et l'attribut "Break-Break".

Puis-je utiliser les propriétés "veuves" et "orphelines" pour les pages Web?

Bien que les propriétés "veuves" et "orphelines" fassent partie de la spécification CSS, elles ont été initialement con?ues pour la pagination de supports tels que l'impression. Actuellement, seuls quelques navigateurs prennent en charge ces propriétés pour les pages Web. Par conséquent, leur utilisation dans les dispositions Web est limitée et n'est pas largement recommandée.

Quelles sont les alternatives au contr?le des lignes de veuve dans la disposition de la page Web?

Il existe certaines techniques pour contr?ler les lignes de veuve dans les dispositions de pages Web. Une méthode courante consiste à utiliser des espaces de rupture de ligne () entre les deux derniers mots d'un paragraphe. Cela garantit que les deux derniers mots resteront ensemble et ne seront pas séparés. Une autre fa?on consiste à empêcher dynamiquement les lignes de veuve en utilisant JavaScript ou JQuery.

Comment empêcher l'enveloppe des lignes dans CSS?

Vous pouvez empêcher les ruptures de ligne dans CSS en utilisant la propriété "White Space" avec la valeur "NowRAP". Cela empêchera le texte de s'envelopper à la ligne suivante, le for?ant à rester sur une seule ligne.

Comment forcer une rupture de ligne en CSS?

<br> Oui, vous pouvez forcer une rupture de ligne en CSS en utilisant l'élément HTML "

" ou en utilisant l'attribut "Content" avec la valeur "A" dans le "After" ou "avant" pseudo- élément .

Comment l'attribut "Line-Break" affecte-t-il la disposition du texte CJK?

L'attribut "rupture" affecte considérablement la disposition et la lisibilité du texte CJK. Par exemple, la valeur "stricte" empêche certains caractères d'appara?tre à la fin ou au début d'une ligne, ce qui peut rendre le texte plus facile à lire. Cependant, cela peut également provoquer des longueurs plus inégales.

Quelle est la valeur par défaut de l'attribut "rupture"?

La valeur par défaut de l'attribut "Line-Break" est "Auto". Cela signifie que le navigateur déterminera les règles de rupture de ligne en fonction de ses règles de rupture de ligne par défaut, qui peuvent varier entre les navigateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!