Хотите, чтобы CSS Text Wrap работал в IE7?

Question

Следующий код прекрасно работает в FF3, но не работает в IE7. У кого-нибудь есть идеи как это исправить?

<div style="padding-top:3px;padding-bottom:5px;width:650px;background:blue">
    <div style="height:50px;float:left;display:inline;width:500px;background:gray">http://www.brainsolis.com/2008/10/twitter-tools-for-comunity-and-love-for-...</div>
    <div style="width:100%;text-align:right;float-right;background:yellow">saaal is saaa twittertool ds ds dsdfsdsdfsdfsdfsdfsdfsd sdf dsf sdf sdf sdf sd ssssssssssssssssssssssssssssssssssssssssssssssssssss</div>
</div>

Answer 1

Вам не нужно плавать элемент и одновременно отображать: inline . Кроме того, вам не нужно устанавливать width: 100% для элементов DIV. Они естественно займут все доступное горизонтальное пространство.

Следующий CSS должен достичь того, что вы пытаетесь.

div.container {

}
  div.floated {
    width:50px;
    float:left;
  }
  div.textbody {
    /* styles */
  }
  br.clear {
    clear:both;
    height:0;
    line-height:0;
  }

<div class="container">
  <div class="floated">
    <p>This is floated</p>
  </div>
  <div class="textbody">
    <p>...text body...</p>
  </div>
  <br class="clear" />
</div>

Для получения дополнительной информации о CSS, проверьте w3schools или посмотрите видео CSS на SampsonVideos .

Answer 2

Я не проверял ваш образец, но он позаботился о проблемах с обёртыванием IE:

div
{
  word-wrap: break-word;  /* for IE, force it to wrap text and keep it inside the div */
}

Answer 3

директива css word-wrap работает для меня

пробовал в ie6, 7, 8 и chrome (как обычно, firefox правильно оборачивает мой текст даже без него)

похоже на изобретение IE, но также совместимо с css3 (http://www.css3.com/css-word-wrap/)