236
Maîtrise des CSS
Figure 10.7
Le texte complet
s’affiche en cas de
survol.
C’est.le.moment.où.intervient.text-overflow..J’aurais.aimé.toucher.un.dollar.chaque.fois.
que.cette.fonctionnalité.m’a.été.utile.dans.ma.carrière.–.j’écrirais.alors.ces.lignes.de.la.terrasse.d’un.bungalow.aux.Bahamas..La.bonne.nouvelle,.c’est.qu’aujourd’hui.cette.propriété.
est.assez.bien.prise.en.charge.par.les.principaux.navigateurs..Internet.Explorer.le.fait.même.
mieux.que.Firefox,.de.même.que.Safari..text-overflow.tronque.le.bloc.de.texte.quand.il.
est.trop.grand.pour.tenir.dans.son.élément.conteneur..La.valeur.ellipsis.ajoute.trois.petits.
points.(…).au.texte.tronqué..
Ici,.text-overflow.est.utilisé.pour.chaque.marqueur.cartographique,.afin.de.limiter.le.texte.
à.une.ligne :
#voices ul li.l1 a em {
white-space: nowrap;
width: 135px;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
}
Comme.cette.fonctionnalité.n’est.pas.officiellement.prise.en.charge.par.les.différents.navigateurs. (même. si. tous. les. principaux. navigateurs. le. font. de. fait),. nous. avons. ajouté. les.
préfixes.–o–.(Opera),.–moz–.(Mozilla).et.–webkit–.(WebKit)..Pour.l’effet.de.survol,.nous.
avons.ajouté.la.pseudo-classe.:hover.à.l’élément,.changé.la.hauteur.à.72 pixels.et.attribué.
la.valeur.visible.à.la.propriété.overflow.
#voices ul li.l1 a em:hover {
white-space: normal;
overflow: visible;
text-overflow: inherit;
-o-text-overflow: inherit;
cursor: hand;
cursor: pointer;
background: #fff none;
height: 72px;
padding-left: 11px;
padding-bottom: 5px;
margin-left: -9px;
}
Voilà.qui.complète.l’effet :.chapeau.bas.à.CSS3.info.pour.leurs.exemples.de.text-overflow,.
qui.ont.inspiré.la.création.de.cet.effet..Vous.pouvez.découvrir.d’autres.fonctionnalités.CSS 3.
sur.leur.site.web.à.l’adresse.http://www.css3.info/.