Как предотвратить содержимое плавающего правого содержимого от перекрытия основного содержимого?

Question

У меня есть следующий HTML:

<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> 

Он должен показывать следующим образом:

[Some content that's wa [ICON]] 

У меня есть следующие CSS:

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

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

При изменении размера браузера, чтобы отрезать текст, он отсекает на краю <td>, а не до <img>, что оставляет <img>, перекрывая <span> содержание. Я пробовал различные padding и margin с, но ничего не работало. Это возможно?

NB: Это очень сложно добавить <td>, который содержит только <img>. Если бы это было легко, я бы просто сделал это :)

Answer 1

Возможно, что overflow: hidden не работает, потому что вы применяете его к встроенному элементу.

Одним из решений может быть размещение этого интервала внутри div, при условии, что div overflow: hidden. Или измените диапазон на div. Возможно, вам все равно придется возиться с предоставлением div правильного поля ширины изображения.

Было бы намного проще без white-space: nowrap. Есть ли какой-либо возможный способ перепроектировать ваше приложение, чтобы оно не использовалось?

Answer 2

Дайте этому попытку:

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;  
} 

Это поместит изображение в дальнем углу <td> и правой прокладки на <span> будет держать изображение перекрывания текста.

Причина позиции: относительная величина в <td class="a"> такова, что она становится системой координат для положения: абсолютное <img>. Вам также нужен тип позиции (относительный, абсолютный или фиксированный) для работы z-index.

Если это не сработает, будет ли возможность поместить изображение в качестве фонового изображения на <span> так:

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 */ 
}