Texte qui sort d'une infobulle en PHP et pas en HTML

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:

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:

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.