Bonjour,
J'ai créé dynamiquement des balises P incrémentées (mot1, mot2...) en fonction d'une chaine de caractère.
Le but est de découper une chaine afin que je puisse jouer sur chaque mot en y attribuant des effets visuels.
En effet, j'aimerais que mes mots arrivent pas le bas de ma page un par un et viennent à la suite des autres afin qu'au final le texte soit lisible comme s'il était entièrement écrit dans un P.
Pour celà, aucun problème. En revanche, quand je fais le test, les mots s'affichent impeccablement à la suite des autres mais il n'y à aucun espace entre eux.
En conséquence, je vous demande si vous pourriez me dire comment insérer un espace avec   ou String.fromCharCode(32) à la fin de mes mots ?
Voici mon code JAVASCRIPT:
HTML
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37 var j=1; function decoupage_texte() { var txt=""; var regSeparateur=new RegExp("[ ]+", "g"); // Expression qui permet de découper une chaine de caractère dès que le caractère d'espacement est trouvé var texte="L'homme, ici, va lentement."; // Le texte à découper var texte_decoup=texte.split(regSeparateur); // Récupère tous les mots dans un tableau : texte_decoup for (var i=0; i<texte_decoup.length; i++) { txt=texte_decoup[i] + " "; // le + " " NE FONCTIONNE PAS. IDEM AVEC String.fromCharCode(32) construction_balise(txt); } } function construction_balise(texte) { var balise_p=document.createElement("p"); // Création de la balise P var texte_balise=document.createTextNode(texte); // Texte de la balise balise_p.appendChild(texte_balise); // Associe le texte à la balise var attr=document.createAttribute("id"); // Création d'un ID pour la balise P attr.nodeValue="mot" + j; // Nom de l'ID incrémenté j++; balise_p.setAttributeNode(attr); // Attribut l'ID à la balise P var affiche_ecran=document.getElementById("bt"); // Récupère le div qui contient la balise P affiche_ecran.appendChild(balise_p); // Affiche le texte de la balise P à l'écran } decoupage_texte();
CSS
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2 <div class="boite" id="bt"></div>
Merci pour votre aide.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2 p {float:left; color:black;font-size:16pt; background-color:green; top:100px;}
Partager