Masquer le contenu débordant derrière l'élément transparent

J'ai une liste ordonnée dans laquelle je montre les meilleurs utilisateurs, avec leurs points correspondants alignés sur la droite. Exemple: http://codepen.io/anon/pen/EkKJC.
Je souhaite masquer la partie débordante du nom d'utilisateur lorsque la fenêtre d'affichage est trop petite. Je ne peux pas utiliser les pourcentages parce qu'ils ne sont pas précis. Je ne peux pas non plus utiliser des largeurs fixes car le contenu est dynamique.
Le problème principal ici est l'arrière-plan transparent (oui, il doit être transparent), car il ne fonctionne pas pour utiliser z-index.
J'ai besoin d'une solution multi-navigateur, sémantique, css-pure et nested-tag-less à ce problème, ou au moins IE7 +. Ou peut-être une autre façon de gérer cette situation. Et en passant, j'aimerais savoir s'il est nécessaire (d'un point de vue sémantique) de donner un nom de classe au <span>, même si je sais qu'il n'y aura pas d'autre <span> dans le <li>.

Merci d'avance.Masquer le contenu débordant derrière l'élément transparent

Source

2013-01-20 Angel Yan

Si vous n'avez pas besoin de faire référence à la plage avec javascript ou quelque chose, alors non, vous n'avez pas besoin de lui donner un nom de classe. Mais vous aussi, vous devez être sûr qu'il n'y aura pas d'autres <ol> sur le site soit, je aurais tendance à donner le <ol> un id de #topusers

ol#topusers { 
    list-style: inside decimal; 
    width: 300px; 
} 

ol#topusers li span { 
    float: right; 
}

Source

2013-01-20 06:23:42

J'ai donné l'ID de l'ol, je ne l'ai simplement pas ajouté dans le codepen. D'un point de vue sémantique, n'est-il pas nécessaire de lui donner un nom de classe? Parce qu'une durée n'a pas de sens. Ayant lu ceci: http://www.w3.org/wiki/HTML/Elements/span, je pense que c'est nécessaire. –

body, footer { 
background: url('http://static3.depositphotos.com/1000635/110/v/450/dep_1104872-Helix-seamless-pattern..jpg') fixed repeat 100% 100%; 
}

en supposant la raison pour laquelle le pied de page doit être transparent est à cause de l'image de fond.

ou, sera

body { 
padding-bottom:(the footer height here); 
}

aide ici?

Source

2013-01-20 06:28:29

essayez d'expliquer votre réponse au lieu de simplement le donner – ArtB

Je n'ai jamais parlé d'un pied de page. S'il vous plaît, relisez la question. La même image de fond ne fonctionnerait pas car elle devrait correspondre à l'image de fond du corps. –

Vous pouvez utiliser l'attribut opacity de css pour masquer le contenu derrière l'élément transparent.

Placez le contenu dans un élément div puis définissez l'opacité de ce div. Merci.

Source

2013-01-20 07:29:31

Je ne veux pas cacher tout le contenu, juste la partie qui déborde. –

Masquer le contenu débordant derrière l'élément transparent

Répondre

Questions connexes