我想让CSS文本换行在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

您不需要同时浮动元素和display:inline。此外，您不需要为DIV元素设置width:100%。它们自然会占据所有可用的水平空间。

下面的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 Videos at 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换行指令适用于我

在ie6，7，8和chrome中试用过(和往常一样，即使没有它，火狐也能正确地对我的文本进行换行)

似乎是IE发明，但也兼容css3 (http://www.css3.com/css-word-wrap/)