CSS n'enveloppe pas le texte

Ethan Guillot
CSS n'enveloppe pas le texte
Une feuille de style en cascade est chargée de fournir les effets et les propriétés au contenu HTML. Le contenu de base qui est affecté est le texte à travers différentes propriétés comme la couleur de la police, la taille de la police, sous la forme de cap, de paragraphe ou à l'intérieur de tout autre conteneur. Dans cet article, nous discuterons d'une propriété CSS du texte qui traite du concept selon lequel le texte ne doit pas être enveloppé, ce qui signifie que cela doit être affiché tel qu'il est écrit dans l'éditeur de texte.

Propriété de texte enveloppe CSS

Cette propriété CSS est une propriété liée au texte. La propriété d'alignement du texte est utilisée ici pour ajuster le texte avec l'alignement à l'intérieur de n'importe quel conteneur extérieur ou en utilisant une petite zone pour afficher indépendamment. Il permet de fixer les mots ou les phrases longs dans une zone ou un conteneur particulier. Vous pouvez également dire que les longs mots sont divisés en deux portions ou plus afin qu'ils puissent être enveloppés dans la ligne suivante. Nous devons appliquer de telles balises pour minimiser les chances de l'enveloppement de texte afin que le texte se trouve sur une seule ligne. Tous ces effets sont appliqués en fonction des exigences.

Pour accomplir le texte Wrap ou ne pas envelopper la propriété, nous utiliserons une propriété CSS spéciale qui est la propriété White Space.

Propriété de l'espace blanc

Il s'agit de la propriété CSS qui aide à contrôler la façon dont la propriété CSS à rupture de ligne et la propriété White Space sont utilisées dans toute création et conception de pages Web. L'espace blanc est la zone qui est présente entre le contenu HTML intérieur et la limite du contenu HTML extérieur. Cette propriété détermine comment l'espace blanc ou la zone à l'intérieur de l'élément HTML est géré ou contrôlé.

Parfois, l'espace est créé automatiquement. Nous devons le retirer, ou dans d'autres cas, les effets CSS spéciaux sont appliqués pour gérer l'espace blanc à l'intérieur de l'élément. Il y a la même approche à appliquer ou à supprimer correctement le texte de l'enveloppe CSS.

La syntaxe de base de la propriété WRAP est:

Espace blanc: Normal | Nowrap | Pre | pré-wrap | pré-ligne;

La valeur peut être l'une des valeurs précédemment données données à la propriété de l'espace blanc. Si la propriété de l'espace blanc est fournie par la valeur normale, cela signifie que l'espace blanc autour du texte est conformément au graphique standard de la normalité. Le pré-wrap provoque l'espace blanc du côté gauche à l'intérieur de l'élément. Cet espace se situe entre le texte et l'élément extérieur, de sorte que le côté gauche de l'élément aura plus d'espace avec le texte «pré» qui a l'espace global avant le texte. La pré-ligne provoque un écart de ligne entre le texte et la limite de l'élément extérieur.

Si nous ne voulons pas envelopper le texte, la propriété de l'espace blanc n'est pas nécessaire pour être appliqué en premier. Mais si l'enveloppe de texte est déjà terminée et que nous devons le supprimer, nous utilisons la valeur «Nowrap» de cette propriété.

Nous mettrons en œuvre ce phénomène dans les exemples suivants:

Exemple 1: n'enveloppez pas le texte avec des tables HTML

Dans cet exemple, nous gérerons la propriété de l'espace blanc dans le contenu de la table. Une table est un conteneur HTML qui porte le texte et d'autres contenus à l'intérieur. Le tableau diffère du conteneur Div car il contient des lignes et des colonnes. Une table a deux types de balises plus loin. La partie de la tête contient les lignes de table et la partie du corps contient également les lignes de table pour ajouter les données du tableau. Tandis que les données HTML sont entrées dans le tableau sous la forme de lignes chacune à l'intérieur de la balise d'en-tête du corps et ne contient que les lectures.

Dans l'exemple, le tableau est appliqué avec la propriété frontalière qui est 1 effondrement.


première rangée

Cette frontière empêche les cellules de la table de se terminer. Le

et étiqueter. Cette section contient les valeurs concernant le titre. Toutes les autres rangées sont entrées dans la section du corps. Nous utilisons le Tag pour les données à l'intérieur des lignes de table. Fermez toutes les balises et sauvez-les.

Après le code corporel HTML, nous utilisons maintenant le corps CSS pour ajouter les effets de l'espacement blanc. Il n'est pas nécessaire d'appliquer le CSS interne car nous utiliserons directement le

sont utilisés pour ajouter les éléments dans le tableau. Fermez la balise. Ces lignes contiennent le cap de la table. Maintenant, utilisez le corps
à l'intérieur de
Tag comme le

et

Mots clés. À l'intérieur de la balise de style, le «TH» est appliqué par l'effet d'espace blanc. Nous affichons le texte à l'intérieur comme une phrase entière sur une seule ligne, nous utilisons donc la propriété «Nowrap».

Maintenant, enregistrez le code dans l'extension HTML. Exécutez le fichier dans le navigateur pour voir la valeur résultante.

Lors de l'exécution, vous verrez qu'un tableau est créé avec l'en-tête déclaré sur la ligne unique, bien qu'il soit suffisamment long pour bénéficier de la propriété de l'espace blanc CSS.

Exemple 2: n'enveloppez pas le texte avec le paragraphe

Un autre exemple que nous avons utilisé ici est le paragraphe. Ces deux paragraphes contiennent un seul mot de plusieurs lettres. Si une phrase est utilisée dans le paragraphe, il est facile de briser la phrase en place entre les mots. Mais un seul mot avec de nombreux caractères sans espace est difficile à tenir sans envelopper le texte.

Le deuxième paragraphe est appliqué avec l'ID CSS. Cet identifiant est déclaré dans la section tête, ce qui rend le CSS interne. Les deux paragraphes ont un seul mot avec de nombreuses lettres. Maintenant, considérez le CSS de ce code. Tout d'abord, tout le corps est appliqué avec un effet de rembourrage et une taille de police.

Le paragraphe est appliqué avec une valeur de marge automatique. Cette valeur est la distance entre le contenu intérieur et la boîte extérieure. Nous avons également ajouté la propriété de rembourrage aux deux paragraphes. La distance entre le paragraphe et la bordure est calculée à travers cette valeur de rembourrage.
L'ID Overflow contient la propriété Text Wrap et donne la valeur pour briser les mots afin que le texte puisse tenir à l'intérieur de la bordure.

#débordement
Débordement de débordement: mot de rupture;

Lors de l'exécution, vous verrez que le paragraphe dans lequel nous n'avons appliqué aucune classe pour l'espace blanc a dépassé la limite que nous avons initiée. Tandis que le deuxième paragraphe est limité sur l'endroit où nous avons appliqué l'effet de débordement de débordement pour briser le mot.

Conclusion

Cet article est utile lorsque nous devons comprendre le concept d'espace blanc dans le contenu HTML. Si nous voulons ajouter cet espace blanc dans la valeur de contenu HTML, en particulier dans le texte, le texte sera divisé en mots distincts et utilisera deux phrases ou plus. Mais si nous ne voulons pas envelopper le texte avec la propriété CSS White Space, le texte sera affiché en une seule ligne sans pause de mots. Nous avons utilisé deux exemples pour élaborer la propriété CSS «Ne pas envelopper le texte» avec la table et le paragraphe.

AWS
Pourquoi devrais-je utiliser des organisations AWS?
Les organisations AWS peuvent gérer de nombreux comptes sur le cloud pour aider les entreprises qui ...
Nathan Blanc
Docker
Comment se connecter dans Docker via l'invite de commande?
Pour se connecter dans Docker via l'invite de commande, utilisez la commande «Docker Login» ou «Dock...
Jules Colin
Git
Comment créer un référentiel GIT pour les projets locaux?
Pour créer un référentiel GIT pour les projets locaux, passez au répertoire Git Root et répertoriez ...
Ethan Guillot