Lorsque vous effectuez une mise en page DivCSS, vous devez contrôler le texte. Aujourd'hui, je vais vous le présenter systématiquement. Il existe quatre propriétés en CSS qui contrôlent les sauts de ligne.
1. espace blanc
Vous pouvez obtenir l'effet des balises PRE en HTML et l'effet noWrap des cellules.
grammaire:
espace blanc : pré-nowrap normal
Valeur:
normal : valeur par défaut. Méthode de traitement par défaut. Le texte gère automatiquement les sauts de ligne. Si la limite du conteneur est atteinte, le contenu ira à la ligne suivante
pre : les nouvelles lignes et autres caractères d'espacement seront protégés. Cette valeur nécessite IE6+ ou !DOCTYPE déclaré comme prise en charge du mode conforme aux normes. Si la déclaration !DOCTYPE ne spécifie pas de mode conforme aux standards, cet attribut peut être utilisé, mais n'aura aucun effet. Le résultat est équivalent à la normale. Voir pré-objet
nowrap : force tout le texte à être affiché sur la même ligne jusqu'à ce que la fin du texte ou qu'un objet br soit rencontré. Voir l'attribut noWrap
illustrer:
Définit ou récupère la façon dont les caractères d'espacement dans un objet sont gérés.
Les espaces blancs, tels que les nouvelles lignes, les espaces et les tabulations, sont ignorés par défaut dans les documents HTML. Lorsque cette propriété est définie sur normal ou nowrap, vous pouvez utiliser l'entité nommée sans retour à la ligne pour ajouter des espaces et l'élément br pour ajouter des sauts de ligne. Cette propriété a le même effet sur le contenu que vous manipulez à l'aide du modèle d'objet de document (DOM) que sur le contenu affiché par IE.
Cette propriété fonctionne sur les objets bloc.
Styles associés :
débordement de texte
Le combiner avec des espaces blancs élimine le besoin d'écrire un programme pour déterminer la longueur d'une chaîne. Cliquez ici pour voir un exemple.
grammaire:
débordement de texte : points de suspension du clip
Valeur:
clip : valeur par défaut. N'affiche pas de marqueurs d'omission (…), mais simplement des recadrages
points de suspension : affiche une marque de points de suspension (...) lorsque le texte à l'intérieur de l'objet déborde
illustrer:
Définit ou récupère s'il faut utiliser une marque de points de suspension (...) pour marquer le débordement de texte dans l'objet.
Cette propriété affecte uniquement le débordement du texte occidental normal dans le sens horizontal en ligne. Un débordement en ligne se produit lorsque le texte d'une ligne dépasse la largeur disponible sans possibilité de retour à la ligne.
Pour forcer le débordement et appliquer la valeur des points de suspension, l'auteur doit définir la propriété d'espace blanc de l'objet sur nowrap.
S'il n'y a aucune possibilité de sauts de ligne (par exemple, la largeur du conteneur d'objets est étroite et le texte est long sans sauts de ligne raisonnables), il est possible de déborder sans appliquer nowrap.
Pour que la valeur des points de suspension soit appliquée, cette propriété doit être définie sur un objet possédant une zone invisible. La meilleure option consiste à définir la propriété de débordement sur masquée. Cette propriété est également appliquée lors de la définition de la propriété overflow sur scroll ou auto. Mais des barres de défilement apparaîtront.
En sélectionnant la marque d'omission, le texte masqué peut être sélectionné. Lors de la sélection, les points de suspension sont masqués et remplacés par du texte.
Cet attribut constitue un moyen efficace de créer un balisage d'omission en DHTML.
2. coupure de mots
La propriété la plus couramment utilisée pour contrôler le retour à la ligne est souvent utilisée en combinaison avec le retour à la ligne ci-dessous.
grammaire:
mot-break : normal break-all keep-all
Valeur:
normal : valeur par défaut. Autoriser les sauts de ligne entre les mots
break-all : ce comportement est le même que celui normal pour les langues asiatiques. Les sauts dans n'importe quel mot d'une ligne de texte en langue non asiatique sont également autorisés. Cette valeur convient au texte asiatique contenant du texte non asiatique.
keep-all : comme d'habitude pour toutes les langues non asiatiques. Pour le chinois, le coréen et le japonais, les sauts de mots ne sont pas autorisés. Idéal pour les textes non asiatiques avec une petite quantité de texte asiatique
illustrer:
Définit ou récupère le comportement de retour à la ligne pour le texte dans un objet. Surtout lorsque plusieurs langues apparaissent.
Pour le chinois, il faut utiliser break-all. [Page coupée]
3. retour à la ligne
Si la page Web que vous concevez n'est pas adaptable en largeur, vous devez la définir sur break-word, sinon la page risque d'être décalée.
grammaire:
retour à la ligne : coupure de mot normale
Valeur:
normal : valeur par défaut. Autoriser le contenu à s'étendre au-delà des limites spécifiées du conteneur
mot de rupture : le contenu dépassera les limites. Si nécessaire, un saut de mot se produira également
illustrer:
Définit ou récupère s'il faut couper la ligne lorsque la ligne actuelle dépasse la limite du conteneur spécifié.
Cette propriété ne fonctionne que sur les objets de présentation, tels que les objets bloc. Pour utiliser cet attribut pour les éléments en ligne, vous devez d'abord définir l'attribut de hauteur ou de largeur de l'objet, ou définir l'attribut de position sur absolu, ou définir l'attribut d'affichage sur bloquer.
4. débordement, débordement-x, débordement-y
Cela ne contrôle pas strictement le style de retour à la ligne, mais le définir sur masqué peut compléter les défauts du retour à la ligne à certains moments. Par exemple, vous souhaitez afficher une seule ligne de texte dans la largeur limitée, mais dans la longueur de cette ligne. du texte dépasse cette largeur, combiné avec un espace blanc + un débordement de texte peut obtenir de meilleurs résultats.
grammaire:
débordement : défilement masqué automatique visible
Valeur:
visible : valeur par défaut. Ne coupe pas le contenu et n'ajoute pas de barres de défilement. Si cette valeur par défaut est explicitement déclarée, l'objet sera découpé aux dimensions de la fenêtre ou du cadre contenant. Et le paramètre d'attribut du clip sera invalide
auto : le contenu de l'objet sera recadré ou des barres de défilement seront affichées si nécessaire
masqué : ne pas afficher le contenu dépassant la taille de l'objet
scroll : toujours afficher les barres de défilement
illustrer:
Récupère ou définit la manière dont le contenu de l'objet est géré lorsqu'il dépasse la hauteur et la largeur spécifiées.
La valeur par défaut de tous les objets est visible, à l'exception des objets textarea et body, où la valeur par défaut est auto. Définir la valeur de cette propriété d'un objet textarea sur caché masquera ses barres de défilement.
Pour les tableaux, si l'attribut table-layout est défini sur fixe, l'objet td prend en charge l'attribut overflow avec une valeur par défaut cachée. S'il est défini sur défilement ou auto, le contenu dépassant la taille td sera coupé. S'il est défini sur visible, le texte supplémentaire débordera vers les cellules de droite ou de gauche (en fonction du paramètre de propriété de direction).
Cette propriété est disponible sur les plateformes MAC à partir de IE5.
À partir d'IE6, cet attribut peut être appliqué aux objets HTML lorsque vous spécifiez un mode conforme aux normes à l'aide de la déclaration !DOCTYPE.