CSS WORD WRAP
Dans ce tutoriel, nous fournirons des conseils complets sur cette propriété «word-wrap» et effectuerons des exemples où nous utiliserons la propriété CSS «Word-Wrap».
Exemple 1:
Nous allons commencer notre code et l'exécuter dans le code Visual Studio. Nous commençons par lancer un nouveau fichier, puis sélectionnons HTML comme langue. Maintenant, type "!»Et appuyez sur« Entrer."Ici, vous trouverez toutes les balises de base HTML. En conséquence, nous n'aurons pas à ajouter manuellement toutes ces balises. Après tout cela, nous insérons simplement le nom du fichier CSS dans la balise «Lien» dans la «tête». Nous mettons deux titres dans le corps et créons une div dans laquelle nous écrivons un long mot afin que nous utiliserons la propriété «word-wrap» dans CSS et vous montrera comment cela fonctionne.
Nous décorions l'en-tête en appliquant la «couleur» et en la fixant sur le «rouge» en utilisant la propriété «text-decoration» et en utilisant le mot-clé «sous-lice» pour cette propriété. Nous appliquons un style à cette rubrique pour le rendre attrayant. Nous décorons également le deuxième titre: «vert» comme «couleur» et appliquons la «décoration de texte» et la définissons sur «souligner». Nous définissons la «largeur» du «div» comme «150px» et créant une «frontière» autour de lui. Cette bordure est à peu près «3px» dans sa «largeur» et c'est un type «solide», «rouge» dans la «couleur».
Ici, nous appliquons la propriété «word-wrap» et la définissons sur «Normal» qui est également la valeur «par défaut». Ça ne brisera pas le long mot. Le long mot apparaîtra tel qu'il est écrit dans le code HTML. Il traversera la frontière que nous avons créée pour la div et le texte long reste le même, il ne brisera pas ce mot.
La sortie montre que le long mot apparaît le même que nous l'écrivons dans le fichier html. Il traverse la limite et apparaît sur une seule ligne. Le long mot n'est pas cassé ici car il définit la propriété «word-wrap» à «normal» qui est la même que la «défaut».
Exemple n ° 2:
Nous utilisons le même code HTML et maintenant nous allons appliquer le mot-clé «Break-Word» que la valeur de la propriété «Word-Wrap» dans cet exemple.
La «couleur» pour l'en-tête 1 «H1», nous utilisons «Maroon» et utilise la «décoration de texte» pour souligner cette rubrique. Pour «H2», nous utilisons «violet» comme le cap «H2» «couleur» et «souligner» également. La «largeur» du conteneur «div» est «160px» et concevoir une bordure autour de lui en utilisant la propriété «frontière». Nous définissons «3px» pour la «largeur» de la frontière de la div qui est de la forme «solide» et «marron» dans la couleur. Voici la propriété «Word-Wrap» dans laquelle nous utilisons la valeur «rupture». Cette valeur brisera le long mot selon l'espace spécifié. Nous examinerons la sortie et saurons comment le long mot se casse en utilisant cette propriété.
Remarquez comment le long mot est brisé et ajusté à l'intérieur du conteneur div. Ce long mot est rompu dans cette sortie car nous utilisons la valeur de «mot de rupture» pour la propriété «word-wrap».
Exemple # 3:
Nous avons deux titres «H1» et «H2». En dessous de ces titres, nous avons deux div différentes avec le nom «A» et «B». Nous écrivons le texte à l'intérieur des deux divs et mettons un long mot dans chaque div. Maintenant, nous créons un fichier CSS dans lequel nous utiliserons la propriété «Word-Wrap».
Nous utilisons la propriété «couleur» et la définissons comme «vert» pour décorer l'en-tête ainsi que la propriété «text-decoration» et le mot-clé «souligner» pour cette propriété «texto-décoration». Nous utilisons également «Orange» comme «couleur» pour le titre suivant et nous implémentons la «décoration de texte» avec «souligner» comme paramètre. Nous définissons la «largeur» du «div» comme «180px», qui définira cette largeur pour les deux divs parce que nous ne mentionnons le nom d'aucun div ici. Nous utilisons également la propriété «frontière» qui s'applique également aux deux div. La «largeur» de la frontière pour les deux divs est «3px», le type «solide» et le «bleu» est défini pour la «couleur» de la bordure.
Nous mentionnons le nom de la première div qui est «div. A "puis l'attribut" word-wrap "est appliqué. La valeur est définie sur «Normal» qui est également la valeur «par défaut». Le long mot n'est pas brisé pour cette div. Le long mot sera affiché exactement car il est tapé dans le code HTML. Maintenant, nous avons le deuxième div qui est «div. b ”. Pour cela, nous utilisons la propriété «Word-Wrap» et la valeur «Break-Word» est utilisée. Le long mot sera brisé selon l'espace fourni avec cette valeur. En tirant parti de cette propriété et de cette valeur, nous pourrons voir comment le long mot se divise dans la sortie.
Le long mot de la première div n'est pas brisé parce que nous utilisons «normal» comme valeur de «mot-mot» pour le «div. un". Mais dans le deuxième div, vous pouvez voir que le long mot est également ajusté dans l'espace spécifié. Ce long mot présent à l'intérieur du deuxième div est cassé. Cela est dû à l'utilisation de la valeur «rupture» de la propriété «Word-Wrap».
Exemple n ° 4:
Nous créons des titres pour cet exemple et mettons deux paragraphes avec les différents noms de classe comme «PAR» pour le premier paragraphe et «par1» pour le deuxième paragraphe. Nous mettons également un long mot dans les deux paragraphes et utiliserons la propriété «word-wrap» dans CSS.
La «couleur» de la tête est définie sous forme RVB. Sa valeur est «RVB (112, 6, 6)», qui est une teinte «marron». Nous utilisons également la famille «algérienne» pour «H1». Nous avons également établi la «Font-Family» de «H2» comme «Times New Roman». La «couleur» de H2 est le «bleu-violet» et le style comme «italique» pour le rendre attrayant.
Maintenant, vient «par» qui définit le premier paragraphe. La «largeur» que nous définissons ici est «200px» et nous définissons sa «couleur arrière» comme «bleu clair». Nous voulons également créer la frontière pour cela, nous utilisons donc «Border» et le définissons sur «2px Solid Black». Le «rembourrage» que nous décrivons est «10px» et la taille du texte du paragraphe est «20px» pour «PAR». Nous n'utilisons pas la propriété «word-wrap» pour ce paragraphe.
Après cela, nous avons un autre paragraphe avec le nom «P1». Nous avons défini la «largeur» comme «11em» et la «couleur fond» comme «bleu clair». Nous aurons également besoin d'une bordure pour cela, nous utilisons donc la «bordure» et la configurer en «2px en noir solide.«Le« rembourrage »dont nous parlons est« 10px ». Nous utilisons la propriété «word-wrap» et la définissons sur «brise de mots» dont nous avons discuté dans nos codes précédents et la taille du texte du paragraphe est «20px» pour «par1».
Ici, le long mot du premier paragraphe n'est pas rompu car nous n'utilisons pas la propriété «word-wrap» pour cela, elle est définie par défaut. Mais nous utilisons le «mot-mot: mot de rupture» pour le deuxième paragraphe, donc le long mot du paragraphe est brisé.
Conclusion:
Le but de ce tutoriel est de vous apprendre à utiliser la propriété CSS «Word-Wrap». Dans ce tutoriel, nous avons examiné la propriété CSS «Word-Wrap» et décrit ce que c'est, comment l'utiliser et comment cela fonctionne. Nous avons expliqué que cette propriété casse le long mot et ajuste ce long mot dans l'espace spécifié. Nous avons également montré des exemples d'utilisation de cette propriété «word-wrap», ainsi que les résultats de tous les exemples.