Enveloppe de débordement CSS
Exemple 01: enveloppe normale
Dans notre premier exemple, nous discuterons de l'utilisation de l'enveloppe normale avec différents styles d'écriture. Nous avons donc utilisé le code Visual Studio pour créer un nouveau fichier HTML nommé «Test.html ”et démarrez le script html à l'intérieur. Le code HTML a été lancé avec la balise HTML principale suivie des étiquettes de tête et de corps principales. Dans l'étiquette du corps, nous utilisons les deux premiers titres de tailles différentes. Le titre 1 est le plus grand tandis que le cap 2 est le deuxième plus grand montrant que ce serait un enveloppe normale.
Après cette rubrique, nous avons utilisé la balise «div» pour créer une nouvelle section dans la page Web HTML principale. Cette balise «div» a été spécifiée avec la classe «d1» à différencier le style. Nous y avons ajouté une ligne de texte ou un paragraphe pour l'envelopper dans un style d'enveloppe normal. Ce texte est simple et il ne contient aucun long mot dedans. Après cette balise «div», nous avons utilisé le deuxième titre de cette page HTML pour afficher que le prochain texte DIV contiendra également une enveloppe normale. Ensuite, nous avons une nouvelle balise «div» spécifiée par la classe «D2» pour la différenciation dans le style.
Cette section «div» contient un long texte ou paragraphe avec un long mot afin que nous puissions voir comment une propriété normale de débit de déborde. Après cette section, le corps est terminé et l'étiquette corporelle sera fermée avec l'étiquette principale «HTML». Dans la balise «tête» de ce code HTML, nous avons une balise de style pour styliser la page HTML. Le mot-clé «div» a été utilisé pour styliser à la fois les sections «div» à 100 pixels avec la bordure de 3 pixels de couleur «Blue Violet» pour chaque. La largeur et la propriété frontalière ont été utilisées ici à cet effet. Après cela, les deux sections div ont été conçues séparément avec l'utilisation de leur classe. Nous avons enveloppé les deux dans l'enveloppe normale en utilisant la propriété «débordement de débordement». Le style est terminé. Donc, le style et la tête sont fermés ici. Notre script HTML est terminé et est prêt à l'usage. Ainsi, nous l'avons enregistré et essayé de l'exécuter sur le code vs.
Nous utilisons le menu «Run» à partir du code Visual Studio suivi de l'option «Débogage de démarrage». Il a demandé à sélectionner le navigateur Chrome dans la liste. Nous l'avons exécuté et avons la sortie de la percente illustrée pour deux sections «div» contenant une enveloppe normale sur son texte. La première section «div» a affiché son texte dans un format trié et normal car il ne contient pas un très long mot qui ne peut pas être installé dans la largeur de 100 pixels.
D'un autre côté, la deuxième boîte «div» contient un très long mot dans son texte. Par conséquent, la sortie montre que le mot a traversé la bordure de la boîte «div» de 100 pixels comme utilisation de l'enveloppe normale. En effet.
Exemple 02: Emballage de rupture
Dans cet exemple, nous discuterons de l'utilisation de l'enveloppe de la rupture par rapport à l'emballage normal. Nous avons donc utilisé le même code HTML dans l'outil de code Visual Studio mais avec peu de mises à jour. Nous allons donc commencer son explication de la balise «corps». Nous avons mis à jour à la fois les données de texte des balises «div» avec la longue phrase contenant un long mot dedans. Le titre 1 serait indiqué comme une enveloppe normale tandis que l'autre ruban de taille 1 est indiqué comme une enveloppe de «rupture».
Nous avons mis à jour le texte de la section «div» pour les deux sections «div» séparément. Le corps est maintenant complet et nous regarderons le style. La même largeur et la même propriété frontalière ont été utilisées pour les deux sections «div» et leurs classes ont été utilisées pour leur style séparé. Nous avons spécifié une enveloppe normale pour la première section «div» tandis que le «mot de rupture» enveloppe pour la deuxième section «div». Nous avons enregistré ce code.
Après avoir exécuté ce code mis à jour dans le navigateur, nous avons la sortie à faire affiché. Le premier texte de la section «div» traverse sa frontière sans casser un mot tandis que l'autre texte de la section «div» a un long mot qui a été brisé et déplacé vers la ligne suivante pour s'adapter dans le volet «div». Cela se fait par l'utilisation de la casse de rupture pour le style.
Exemple 03: n'importe où enveloppe
Dans cet exemple, nous expliquerons l'utilisation de la propriété déborde. Donc, dans l'étiquette corporelle de notre code HTML, nous avons mis à jour ses titres. Le premier cap de la taille 1 a été indiqué comme un mot de rupture ”Emball tandis que le deuxième cap de la même taille est indiqué comme« enveloppement n'importe où ». Les deux balises «div» contiennent le texte de la longue phrase mise à jour contenant au moins 1 long mot dedans. Les deux phrases des balises «div» sont mises à jour séparément pour la rupture et n'importe où enveloppent séparément.
Dans la balise de style, nous avons à nouveau utilisé la largeur de 100 pixel. Après cela, nous avons utilisé les classes des deux balises séparément pour les styliser en conséquence: D1 et D2. La propriété de débordement de débordement a été utilisée pour «div» séparément pour styliser la première div avec une enveloppe «break-word» et le deuxième «div» avec le wrap «Anywhere». Enregistrons et exécutons ce code maintenant.
La sortie de ce code mis à jour n'a montré pas un changement mineur dans le style des deux sections «div». Pause et n'importe où est tout à fait le même.
Conclusion
Il s'agit du style de différents éléments d'un fichier HTML avec la propriété «débordement de débordement» pour éviter le débordement de différents textes de chaîne de tout type d'élément dans les pages Web HTML. Nous avons vu trois exemples HTML très simples mais utiles couvrant séparément l'enveloppe normale, la pellicule de rupture et l'enveloppe n'importe où. Parallèlement à cela, nous avons également couvert leurs comparaisons.