Non seulement les gens, mais aussi les mots peuvent être difficiles à supporter. Par exemple, un composé chimique est très similaire à certaines personnes avec un « subverti » ! Nous ne savons pas comment gérer des personnalités aussi difficiles, mais CSS nous aidera certainement avec le retour à la ligne :

Pourquoi endurer « l’insupportable »

Dans la plupart des cas, lors de l'affichage de contenu textuel sur des pages Web dans un navigateur, le retour à la ligne n'est pas appliqué. Si le mot ne rentre pas entièrement dans la zone de l'écran, il « passe » par défaut complètement à la ligne suivante.

La césure partielle ne s'applique qu'aux mots longs et complexes contenant plusieurs termes et séparés par un trait d'union. C'est là que surgissent les problèmes d'affichage de ces mots sur des écrans de différentes diagonales et dans différents navigateurs. En même temps, prédisez avec précision comment long mot ressemblera côté client difficile, donc définir des tirets « manuellement » est inutile :

Résoudre le problème du retour à la ligne en utilisant HTML

Avant d'envisager d'encapsuler des mots longs dans CSS, explorons comment le langage hypertexte peut résoudre ce problème.
Il existe plusieurs options pour cela en HTML :

• Utilisation du symbole de pause douce -— permet de préciser l'emplacement de la pause mot composé. Lors du redimensionnement de la fenêtre du navigateur, seule la partie du mot long après ­ est déplacée vers la ligne suivante, et après la première moitié, un trait d'union en forme de trait d'union s'affiche :

Un exemple de composé chimique complexe et de texte - acide méthylpropénylène dihydroxy-cycinnamenylacrylique

• Utilisation d'une balise - l'élément est apparu en HTML 5. Il sert également à indiquer au navigateur où casser un mot complexe ou long. Mais contrairement au caractère spécial précédent, cette balise n'affiche pas de trait d'union au point de « rupture », ce qui peut nuire à la lisibilité de l'ensemble du texte :

méthylpropénylène dihydroxycine acide ménylacrylique

Prise en charge des balises dans certains navigateurs mal mis en œuvre. Cela fonctionnera si la propriété display avec la valeur inline-block est spécifiée dans le code CSS.

Encapsuler des mots en utilisant CSS

Avant de désactiver le retour à la ligne en CSS, examinons quelques propriétés qui peuvent résoudre le problème principal :

1. word-wrap - décrit comment envelopper les mots qui ne rentrent pas dans les dimensions spécifiées du conteneur. Il convient de prévenir d'emblée qu'il y a des problèmes avec la validation de cette propriété, et le consortium W3C n'a pas encore décidé de la mise en œuvre de son support en CSS. Par conséquent, les validateurs spécialisés généreront une erreur si un retour à la ligne est présent dans le code :

Pourtant, cette propriété est « perçue » par tout le monde navigateurs modernes et est solution efficace problèmes de césure des mots longs. le retour à la ligne prend les valeurs suivantes :

• normal – les mots ne sont pas coupés ;
• mot de rupture transfert automatique mots;
• hériter – hérite de la valeur du parent.

Un exemple illustrant l'utilisation de cette propriété :

Dans la nouvelle spécification CSS, la propriété word-wrap a été renommée overflow-wrap . Les deux propriétés acceptent mêmes valeurs. Mais la prise en charge du overflow-wrap est encore mal implémentée, il est donc préférable d'utiliser ancienne version propriétés:

Comme vous pouvez le voir dans la capture d'écran ci-dessus, la nouvelle propriété est prise en charge Google Chrome, mais n'est pas pris en charge dans IE. Par conséquent, il est préférable de ne pas utiliser overflow-wrap pour le retour à la ligne en CSS.

1. word-break – définit des règles pour couper les lignes à l'intérieur du conteneur si elles n'y rentrent pas en largeur. Il s'agit d'une nouvelle propriété et sa prise en charge a été implémentée dans CSS3. Il est valide, mais est conçu pour fonctionner avec des chaînes, le retour à la ligne peut donc être grammaticalement incorrect.

La propriété prend trois valeurs :

• normal – les règles de transfert par défaut sont utilisées ;
• saut de mot – les sauts de ligne sont effectués automatiquement afin que le mot s'adapte aux dimensions de largeur du conteneur ;
• keep-all – désactive la césure automatique des mots en chinois, japonais et coréen. Pour les autres langues, l'effet de la valeur est similaire à la normale.

1. Les tirets sont une nouvelle propriété introduite avec la sortie de CSS3. Il définit la manière dont le navigateur gérera le retour à la ligne dans le texte de sortie. La propriété accepte plusieurs valeurs :

• aucun – désactive le retour à la ligne en CSS ;
• manuel( valeur par défaut) – les mots sont transférés dans ces zones bloc de texte, où cela est spécifié à l'aide de la balise ou transfert doux (-) ;
• auto – le navigateur enveloppe automatiquement les mots en fonction de ses paramètres.

Pour bon fonctionnement propriétés dans la balise ou

L'attribut lang doit être présent avec la valeur « ru » (lang="ru").

Propriété prise en charge dernières versions IE, Opéra et Firefox. Chacun d'eux a le sien Ligne CSS. Les traits d'union ne sont pas pris en charge par Google Chrome. Exemple:

Interdiction de la césure des mots

Parfois, vous devez vous assurer que la ligne entière est affichée sans interruption. L'interdiction du retour à la ligne en CSS peut être implémentée de plusieurs manières :

• Utiliser un espace insécable   , qui est défini au niveau des sauts de ligne ou des sauts de mots ;
• En définissant la propriété espace blanc signifiant "nowrap" ( espace blanc : nowrap).

Exemple de mise en œuvre :

Lors de la réalisation des mises en page, les webmasters se posent périodiquement une question : comment le texte sera-t-il transféré ? Dans la plupart des cas, le navigateur gère lui-même cette tâche. Mais parfois, ce processus doit être maîtrisé, en particulier lors du formatage de mots et de phrases longs qui, s'ils sont mal traduits, perdent leur sens.

propriété de retour à la ligne

En HTML, il existe une balise spéciale pour séparer les lignes
. Mais son utilisation trop fréquente est considérée comme de mauvaises manières parmi les développeurs et indique souvent un manque de professionnalisme. Pour preuve, imaginez que vous avez un logo et que vous voulez que chaque lettre commence par nouvelle ligne:

Le résultat est un code lourd et laid qui provoquera un choc culturel pour tout développeur. Et que faire si vous souhaitez que le logo soit positionné horizontalement sur la version de bureau, et verticalement si la largeur de l'écran est inférieure à 550 pixels ? Par conséquent, pour configurer apparence les éléments utilisent toujours des feuilles de style en cascade. De plus, grâce aux outils CSS, les sauts de ligne sont effectués de manière plus élégante. Dans ce cas, il n'y a pas de balisage redondant, ce qui ne fait que réduire la vitesse de chargement des pages.

La première propriété à laquelle vous devez accéder pour le traitement de texte est le retour à la ligne. Accepte trois valeurs : normal, break-all et keep-all. Pour travailler, il suffit de se souvenir du break-all. Normal est la valeur par défaut et il ne sert à rien de la spécifier. Gardez tous les moyens à l'intérieur Document CSS interdiction des sauts de ligne. Conçu spécifiquement pour les caractères chinois, japonais et coréens. Par conséquent, si vous n’allez pas bloguer dans l’une de ces langues, la propriété ne vous sera pas utile. Et aussi, ce n'est pas pris en charge Navigateur Safari Et téléphones portables basé sur iOS.

Pour attribuer le logo de l'exemple précédent avec en utilisant CSS Pour déplacer chaque lettre vers une nouvelle ligne, vous devez écrire le code suivant :

P( police : gras 30px Helvetica, sans empattement ; largeur : 25px ; retour à la ligne : break-all ; )

La largeur et la taille de la police sont sélectionnées de manière à laisser suffisamment d'espace pour une seule lettre. Le retour à la ligne avec la valeur break-all indique au navigateur de diviser le mot sur une nouvelle ligne à chaque fois. Cette propriété ne peut pas être qualifiée d'irremplaçable. Mais cela est utile lors de la conception de petits blocs de texte, tels que des champs de saisie de commentaires.

propriété d'espace blanc

Une erreur courante que commettent les nouveaux développeurs Web est d'essayer de modifier du texte avec des espaces ou des touches Entrée, puis de se demander pourquoi leurs efforts n'apparaissent pas sur la page. Peu importe le nombre de fois que vous appuyez sur Entrée, le navigateur l'ignorera. Mais il existe un moyen de lui faire afficher le texte comme vous le souhaitez, en tenant compte de tous les espacements.

Dans un document CSS, les sauts de ligne attribués à l'aide de la propriété white-space peuvent être configurés pour respecter les espaces ou les touches Entrée. Un espace blanc avec la valeur pré-ligne forcera le navigateur à voir Entrée dans le texte.

Si vous remplacez pre-line par pre-wrap dans votre code CSS, le retour à la ligne prendra en compte les espaces. Et vice versa, interdisez tout retour à la ligne en attribuant au texte une propriété d'espacement avec la valeur nowrap :

#wrapper p( couleur : #FFF ; remplissage : 10px ; police : gras 16px Helvetica, sans-serif ; espace blanc : nowrap ; )

Débordement de texte

Un autre outil utile pour travailler avec du texte - c'est un débordement de texte. En plus des sauts de ligne, la propriété CSS vous permet de découper le contenu lorsque le conteneur est plein. Prend deux valeurs :

• clip - coupe simplement le texte ;
• points de suspension - ajoute des points de suspension.

#wrapper p( couleur : #FFF ; remplissage : 10 px ; police : gras 16 px Helvetica, sans-serif ; débordement de texte : points de suspension ; /*Ajouter des points de suspension*/ espace blanc : nowrap ; /* Désactiver le retour à la ligne */ débordement : caché;/*Masquer tout ce qui dépasse le conteneur*/ )

Pour que la propriété fonctionne, l'élément doit également être défini pour interdire les sauts de ligne et les débordements avec la valeur masquée.

Nous continuons à explorer les capacités de CSS3 et le retour à la ligne est la prochaine étape. Le retour à la ligne est une fonctionnalité très utile car elle rend le texte plus joli sur la page. De plus, vous devez parfois créer des colonnes comme dans les journaux, et l'alignement à droite ou à gauche semble moche. Mais si vous l'étirez sur toute la largeur de la colonne, il sera alors plus agréable à l'œil de lire un tel texte. Mais même dans ce cas, il existe une nuance telle que de grands espaces entre les mots, ce qui semble moche. C'est ce que nous allons corriger dans cette leçon.

Fonctionnalités CSS3 :

En étudiant les articles que j'ai sélectionnés pour vous ci-dessus, vous apprendrez aussi beaucoup propriétés utiles, et découvrez également les nouvelles fonctionnalités de CSS3, qui vous permettent d'utiliser moins moins d'images En ligne.

Créer une césure de mot

Texte sans tirets

Si quelqu’un ne comprend pas de quoi on parle, voici un exemple sans utiliser de césure de mot :

Avec des traits d'union

Voici un exemple où nous utilisons le retour à la ligne CSS :

Cool! Comment faire cela dans le code ?

Maintenant, je pense que tout le monde comprend parfaitement ce que nous allons faire. Il est donc temps de découvrir la nouvelle propriété de CSS3 !

Et cette propriété s'écrit ainsi : des traits d'union.

Simple, n'est-ce pas ? Mais chaque navigateur a ses propres préfixes, donc dans le code cela ressemble à ceci :

N'oubliez pas d'étirer le texte sur toute la largeur du bloc à l'aide de la propriété text-align: justifier, sinon résultat désiré tu ne verras pas.

Bonjour à tous et commençons. Disons que nous avons le texte suivant :

Gouvernement uni Emirats Arabes Unis et l'administration concentre dans cette ville toutes les technologies les plus récentes, basées sur les dernières avancées scientifiques et technologiques, en essayant de la transformer en une ville du futur, comme si elle sortait tout droit de l'écran d'un film de science-fiction. Ces technologies incluent des robots policiers, des voitures robotisées et le système de transport Hyperloop. Dans un avenir proche, un service de taxi volant automatisé commencera à fonctionner à Dubaï. Et en préparation de cet événement, un biplace électrique avion Un Volocopter à 18 rotors, qui sera utilisé comme taxi, a effectué son premier vol en mode automatique, écrivent-ils...

Nous avons ici un texte avec lequel nous allons maintenant commencer à travailler.

Et la première propriété que nous considérerons s'appelle le saut de mot

saut de mot : normal | garder tout | Tout casser

Nous nous intéressons principalement à deux valeurs de cette propriété normale - la valeur par défaut et break-all, à l'aide desquelles nous établissons que le retour à la ligne s'effectue caractère par caractère. Quant à garder tout, alors valeur donnée Utilisé pour couper des mots en chinois, japonais et coréen.

P( mot-break: break-all;. )

Veuillez noter qu'après utilisation de ce style tout notre texte est étiré sur toute la largeur disponible et les traits d'union sont réalisés non pas par des mots, mais par des caractères. Cette propriété peut être utile lorsque nous avons un mot très long qui ne rentre pas dans la largeur spécifiée. Cependant, cela crée une sorte d'inconvénient, car absolument tous les mots sont transférés caractère par caractère, même ceux qui rentrent dans la largeur donnée.

Heureusement, il existe une propriété similaire qui transfère uniquement les mots qui ne correspondent pas aux caractères. C'est ce qu'on appelle le overflow-wrap :

P( overflow-wrap: break-word; )

et après avoir appliqué la valeur break-word, tout notre texte est transféré mot par mot, et les mots qui ne rentrent pas dans la largeur spécifiée sont transférés caractère par caractère. On peut dire que la tâche est accomplie ! En plus de la valeur break-word, cette propriété accepte :

overflow-wrap : normal | mot de rupture | hériter;

Passons maintenant à quelque chose de plus avancé propriété CSS pour envelopper des mots dans un texte.

Considérons la propriété white-space, avec laquelle nous pouvons imiter le fonctionnement de la balise pre sans changer le texte lui-même en monospace.

espace blanc : normal | maintenantrap | pré | pré-ligne | pré-emballage | hériter

Essentiellement, en utilisant cette propriété, nous travaillons uniquement avec des espaces dans le texte. Par exemple, si nous appliquons le style suivant à notre texte :

Espace blanc : nowrap ;

tous les sauts de ligne seront ignorés et notre texte sera affiché sur une seule ligne.

Espace blanc : pré ;

Si la valeur est pre, tous les sauts de ligne seront similaires à ceux du code source. De plus, si le texte ne rentre pas dans la largeur spécifiée, il ne sera pas transféré. Si nous voulons qu'il soit transféré, nous devons alors spécifier la valeur de pré-ligne.

Si l'on veut prendre en compte non seulement les sauts de ligne code source, mais aussi des espaces entre les mots, alors il faut préciser :

Espace blanc : pré-enveloppement ;

C’est essentiellement tout ce que je voulais vous dire sur la césure des mots à l’aide de CSS. J'espère que cet article vous a été utile et que vous utiliserez les connaissances acquises plus d'une fois.

Eh bien, je vous dis au revoir. Je vous souhaite du succès et bonne chance! Au revoir!

Vlad Merjevitch

Contrairement au texte imprimé, les traits d’union sont rarement utilisés sur une page Web, car nous ne sommes pas strictement liés au format papier. Les sites peuvent consulter différents moniteurs, avec différentes résolutions, dans différents systèmes d'exploitation et les navigateurs. Tout cela donne lieu à une telle combinaison de combinaisons qu'il est impossible de prédire à quoi ressemblera le texte final pour l'utilisateur. Pour cette raison, le texte est généralement aligné à gauche et les traits d’union apparaissent dans les mots entiers. Néanmoins, la césure des mots est nécessaire dans certains cas, par exemple lorsque de longs termes chimiques ou médicaux sont utilisés dans des colonnes étroites d'une largeur donnée, pour des raisons d'esthétique. Dans le manuel HTML et CSS ou méthodes automatiques Il n’y a pas beaucoup de traits d’union à ajouter, je vais donc tous les énumérer.

Utiliser une balise

Étiqueter introduit dans HTML5 et crée un retour à la ligne si nécessaire. Dans les endroits où, selon les règles de la langue russe, la césure est autorisée, nous insérons (Exemple 1). Si le mot entier rentre dans la largeur allouée, cette balise ne se manifestera d'aucune façon et nous ne connaîtrons même pas sa présence. Si le mot ne rentre pas, le navigateur se trouve à l'emplacement de la balise crée un transfert.

Exemple 1. Balise

Un douzième classe la rêveuse Anzhelika, après avoir obtenu son diplôme d'études secondaires, a choisi le métier d'entrepreneur produit conducteur prostré.

Le résultat de cet exemple est présenté sur la Fig. 1.

Riz. 1. Texte avec tirets

Transfert doux

Application a un sérieux inconvénient - il est impossible de comprendre s'il s'agit d'un trait d'union devant nous ou d'un mot séparé sur une autre ligne. De ce fait, le sens de la phrase peut être perdu et elle peut être mal comprise. Les césures doivent être faites selon les règles de la typographie, à savoir : ajouter un trait d'union en fin de ligne. La césure douce s'en sort bien : dans le code HTML, il y a un caractère spécial pour cela - . Il joue le même rôle qu'une balise - n'est pas visible dans le texte normal et déplace le mot sur une autre ligne, tout en ajoutant un trait d'union (exemple 2).

Exemple 2 : transfert progressif

Angelica, élève de onzième année, après avoir obtenu son diplôme d'études secondaires, a choisi le métier de chauffeur d'entreprise.

Le résultat de cet exemple est présenté sur la Fig. 2. Remarquez à quel point le texte est plus esthétique et plus clair que la figure. 1.

Riz. 2. Texte avec tirets

propriété de saut de mot

Pour automatiser le processus de création de traits d'union, utilisez la propriété word-break avec la valeur break-all (exemple 3). Vous n'avez plus besoin d'ajouter de symboles ou de balises au HTML ; les styles s'occupent de tout.

Exemple 3. Utilisation du saut de mot

Angelica, élève de onzième année, a choisi le métier d'employée de bureau après avoir obtenu son diplôme.

Le résultat de cet exemple est présenté sur la Fig. 3. Les règles de césure du texte ne sont pas prises en compte dans ce cas, les mots peuvent donc être coupés d'une manière très bizarre.

Riz. 3. Texte avec tirets

De toutes les méthodes énumérées, l'utilisation de "semi-manuelle" donne le meilleur résultat - les règles de la langue russe sont respectées, le texte est le plus esthétique. Utilisez-le lorsqu'il y a des mots longs dans le texte.

Propriété des tirets

Et enfin, la propriété la plus puissante et la plus pratique pour ajout automatique traits d'union - tirets. Son action est basée sur le dictionnaire de césure intégré au navigateur, il donne donc le meilleur résultat. Pris en charge dans IE10, Firefox, Android et iOS. Chrome et Opera ne prennent pas en charge. Pour que ça marche, pour le tag ajoutez l'attribut lang avec la valeur ru (exemple 4).

Exemple 4 : Utilisation de tirets

Angelica, élève de onzième année, a choisi le métier d'employée de bureau après avoir obtenu son diplôme.

Le résultat de cet exemple est présenté sur la Fig. 4.

Riz. 4. Texte avec tirets

Interdiction des transferts

Souvent, la tâche inverse se pose : interdire les césure là où elles sont inacceptables selon les règles de la langue. Par exemple, vous ne pouvez pas séparer les unités de mesure d'un nombre (10 ml), la désignation d'une année (54 avant JC), les initiales d'un nom de famille, casser les abréviations stables (etc.), etc. Pour empêcher le navigateur d'ajouter des traits d'union à l'espace, il devrait être remplacé par Espace non-cassant(exemple 5).

Exemple 5 : Utilisation

Lac aux coordonnées 70° 58′ 19″ N. w. 97° 24′ 5″ E. situé dans la région de Taimyr Dolgano-Nenets Territoire de Krasnoïarsk Russie.

DANS dans cet exemple Pour une écriture correcte des coordonnées, on l'utilise, ce qui ne permet pas de renvoyer à la ligne le texte.