Bonjour à toutes et à tous!

Mon problème est le suivant : Je fais apparaître une infobulle au passage de la souris sur une div qui contient un texte. L'infobulle contient plusieurs zone (titre, photo et description). Mais si mon titre ou ma description sont trop longs, le texte déborde dans un fichier .php alors qu'il revient à la ligne automatiquement dans le même fichier enregistré au format .html !!

Voici le code du fichier index.html ou index.php (c'est le même à cet endroit là)

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
<div class="evenement1">
       <evenement1 class="infobulle">L'évènement 1 en question<span>
            <titre>titre de l'évènement</titre>
            <photo><img src="image.jpg"  alt="" height="80" width="100"></photo>
            <description>Description de l'évènement 1 ...</description>
            </span>
       </evenement1>
</div>


Et voici le code du fichier .css associé :

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
evenement1.infobulle {
position:relative; cursor:help;
}
evenement1.infobulle span {
opacity:0; position:absolute; top:-2500px; right:-0px;	
}
evenement1.infobulle:hover {background:none; z-index:999;
}
evenement1.infobulle:hover span {
   -webkit-transition-delay: 0.4s; -moz-transition-delay:0.4s; -ms-transition-delay:0.4s; -o-transition-delay:0.4s;
   opacity: 1;
   display:block; position: relative; top: -25px; right: 80px; width:545px; height:215px;z-index:999;
   background-color:#FFFFFF;
   box-shadow: 14px 14px 6px #585858; padding: 10px 10px 10px 10px;
   }
evenement1.infobulle:hover titre {
   display:block; position: absolute; top: 0px; left: 0px; height:25px; width:100%; border-bottom-style:solid; background-color:black;
   font-family:arial;line-height:100%;color:#ffffff;text-align:center;font-size:18px;padding-top:3px;
   }
evenement1.infobulle:hover photo {
   display:block; position: absolute; top: 25px; left: 0px; height:80px; width:100px; background-color:white;
   }
evenement1.infobulle:hover description {
   display:block; position: absolute; top: 25px; left: 100px; height:80px; width:465px; background-color:white;
   }

Je vous remercie par avance pour votre aide.