ATOZ CSS Astuce rapide: utilisant des veuves et des pauses de ligne-tutoriel CSS-php.cn

AtoZ CSS Quick Tip: Using Widows and Line Breaks

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

Copier après la connexion

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

Copier après la connexion

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.

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

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

Copier après la connexion

<code><p>这是否违反了我关于不使用换行符进行样式设计的规则？也许吧。我会批评自己的。</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>一个 <br> <code> <code>标签的作用并不大（除了强制换行），并且没有任何视觉特征——你无法看到它们，它们没有任何形状、大小或颜色等等。

<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>但是，您可以向其中一个添加一个类，并使用 <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>设置 <code>将不会导致换行。设置 <code> <code>将导致换行。这在与媒体查询结合使用时偶尔很有用，可以在特定屏幕尺寸下启用或禁用换行。

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. <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"><code>这是一个很长的标题，应该在这里换行</code></pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div>

<code><p>这些代码片段将允许文本在窄屏幕设备上作为单行流动，但对于大屏幕，换行将可见，版权文本将显示在两行上。</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>回到我们这篇文章的开头，如果我们不应该使用 <br> <code>标签来强制换行（并移除难看的寡妇行），那么我们应该使用什么呢？</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>

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

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

Copier après la connexion

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

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

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

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

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", "lâche", "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!