Как сделать так, чтобы содержимое с плавающим правом не перекрывало основное содержимое? - PullRequest
Новая
       5

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

2 голосов
/ 30 июля 2010

У меня есть следующий 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 s, но, похоже, ничего не получалось.Возможно ли это?

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

Ответы [ 2 ]

1 голос
/ 30 июля 2010

Попробуйте: 

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 */
}
1 голос
/ 30 июля 2010

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

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

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

...