Comment empêcher le contenu flottant de chevaucher du contenu principal?

Question

je le code HTML suivant:

<td class='a'> 
    <img src='/images/some_icon.png' alt='Some Icon' /> 
    <span>Some content that's waaaaaaaaay too long to fit in the allotted space, but which can get cut off.</span> 
</td> 

Il doit afficher comme suit:

[Some content that's wa [ICON]] 

je le CSS suivant:

td.a span { 
    overflow: hidden; 
    white-space: nowrap; 
    z-index: 1; 
} 

td.a img { 
    display: block; 
    float: right; 
    z-index: 2; 
} 

Lorsque je redimensionne le navigateur pour couper les texte, il coupe au bord de la <td> plutôt que devant le <img>, ce qui laisse le <img> chevaucher le <span> contenu. J'ai essayé divers padding et margin s, mais rien ne semblait fonctionner. Est-ce possible?

NB: Il est très difficile d'ajouter un <td> qui contient juste le <img> ici. Si c'était facile, je ferais juste ça :)

Answer 1

Il est possible que overflow: hidden ne fonctionne pas parce que vous l'appliquez à un élément en ligne.

Une solution pourrait être de placer cette envergure à l'intérieur d'un div, ce qui donne overflow: hidden div. Ou changez la durée en div. Il se peut que vous ayez encore besoin de déranger en donnant au div une bonne marge sur la largeur de l'image.

Ce serait beaucoup plus facile sans la propriété white-space: nowrap. Existe-t-il un moyen possible de re-concevoir votre application afin qu'elle n'ait pas besoin de l'utiliser?

Answer 2

pour cette solution:

td.a { 
    position: relative; 
} 

td.a span {  
    display: block; 
    overflow: hidden; 
    white-space: nowrap; 

    position: relative; 
    z-index: 1; 

    padding-right: 20px; /* This should be the width of your image */ 
} 

td.a img { 
    position: absolute; 
    z-index: 2; 
    top: 0; 
    right: 0;  
} 

Il mettra l'image à l'extrême droite de votre <td> et le rembourrage à droite sur la <span> gardera l'image de se chevaucher le texte.

La raison de la position: relative dans le <td class="a"> est de sorte qu'il devient le système de coordonnées pour la position: absolue <img>. Vous avez également besoin d'un type de position (relatif, absolu ou fixe) pour que z-index fonctionne.

Si cela ne fonctionne pas, serait-il une possibilité de mettre l'image comme une image d'arrière-plan sur la <span> comme ceci:

td.a span {  
    display: block; 
    overflow: hidden; 
    white-space: nowrap; 

    padding-right: 20px; /* This should be the width of your image */ 
    background: url(your-img.png) no-repeat 100% 0; /* right-top aligned background */ 
}