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 &nbsp ou String.fromCharCode(32) à la fin de mes mots ?

Voici mon code JAVASCRIPT:

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();
HTML
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
 
<div class="boite" id="bt"></div>
CSS
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;}
Merci pour votre aide.