Explorer les propriétés d'habillage de texte CSS : retour à la ligne et traits d'union

Exploration des propriétés d'habillage de texte CSS : retour à la ligne et traits d'union

Dans la conception Web, l'habillage de texte est une question importante. Lorsque le texte dépasse la largeur du conteneur, nous devons choisir une méthode de retour à la ligne appropriée pour garantir la lisibilité et l'esthétique du contenu. Cet article présentera deux propriétés couramment utilisées en CSS : le retour à la ligne et les traits d'union, et fournira des exemples de code spécifiques pour illustrer leur utilisation et leurs effets.

1. attribut word-wrap

L'attribut word-wrap est utilisé pour spécifier comment le texte est traité lors du retour à la ligne. Il a deux valeurs facultatives : normal et break-word.

• normal : valeur par défaut. Lorsque le texte dépasse la largeur du conteneur, les lignes sont enroulées entre les mots et si un mot est trop long pour tenir entièrement sur une ligne, il déborde sur la ligne suivante.

Exemple de code :

<style>
.container {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}

.normal-text {
  word-wrap: normal;
}
</style>

<div class="container">
  <p class="normal-text">这是一段很长很长很长很长很长很长的文本。</p>
</div>

Effet : La largeur du conteneur est de 200 px, et lorsque le texte dépasse la largeur du conteneur, des sauts de ligne seront effectués entre les mots.

• break-word : Lorsque le texte dépasse la largeur du conteneur, il se brisera à l'intérieur du mot, même si le caractère de nouvelle ligne au milieu du mot n'existe pas.

Exemple de code :

<style>
.container {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}

.break-word {
  word-wrap: break-word;
}
</style>

<div class="container">
  <p class="break-word">这是一段很长很长很长很长很长很长的文本。</p>
</div>

Effet : La largeur du conteneur est de 200 px, et lorsque le texte dépasse la largeur du conteneur, il s'enroule à l'intérieur du mot.

2. attribut hyphens L'attribut

hyphens est utilisé pour contrôler l'utilisation des traits d'union afin de s'adapter aux différentes langues et aux besoins de mise en page du texte. Il a trois valeurs facultatives : aucun, manuel et automatique.

• aucun : valeur par défaut. Sans tirets, le texte s'ajuste directement lorsque cela est nécessaire.

Exemple de code :

<style>
.container {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}

.no-hyphens {
  hyphens: none;
}
</style>

<div class="container">
  <p class="no-hyphens">这是一个没有连字符的例子。这个长长长长的单词不会被自动断行，而是直接溢出到下一行。Hyphens are not used in this example, so the long word will overflow to the next line instead of being automatically broken.</p>
</div>

Effet : La largeur du conteneur est de 200 px, et lorsque le texte dépasse la largeur du conteneur, les mots débordent directement sur la ligne suivante.

• manuel : Césure manuelle, ajoutez manuellement des traits d'union selon les règles de césure de la langue.

Exemple de code :

<style>
.container {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}

.manual-hyphens {
  hyphens: manual;
}
</style>

<div class="container">
  <p class="manual-hyphens">这是一个使用手动断字的例子。这个长长长长的单词被手动添加了连字符，使其在需要换行时正确断行显示。</p>
</div>

Effet : La largeur du conteneur est de 200 px, et lorsque le texte dépasse la largeur du conteneur, les mots seront correctement affichés avec des sauts de ligne selon les règles de césure de la langue.

• auto : ajoutez automatiquement des traits d'union selon les règles de césure de la langue.

Exemple de code :

<style>
.container {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}

.auto-hyphens {
  hyphens: auto;
}
</style>

<div class="container">
  <p class="auto-hyphens">这是一个使用自动断字的例子。这个长长长长的单词会根据语言的断字规则自动添加连字符，使其在需要换行时正确断行显示。</p>
</div>

Effet : La largeur du conteneur est de 200 px, et lorsque le texte dépasse la largeur du conteneur, les mots seront correctement affichés avec des sauts de ligne selon les règles de césure de la langue.

Résumé :

En utilisant les deux propriétés CSS word-wrap et tirets, nous pouvons avoir un contrôle plus précis sur l'habillage du texte. L'attribut word-wrap est utilisé pour spécifier la manière de renvoyer à la ligne les lignes, et vous pouvez choisir de renvoyer les lignes entre les mots ou à l'intérieur des mots ; l'attribut hyphens est utilisé pour contrôler l'utilisation des traits d'union, et vous pouvez choisir de ne pas utiliser de traits d'union, ajouter tirets manuellement ou ajoutez des tirets automatiquement. Dans la conception Web réelle, nous pouvons choisir les valeurs d'attribut appropriées en fonction des caractéristiques et des exigences linguistiques du texte pour obtenir une meilleure lisibilité et des effets de composition.

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!