html - 为什么字符长时会出现在底部？

Question

我正在尝试进行响应式设计。

演示http://jsfiddle.net/tbuU8/

它应该是这样的图像。主要有左右两个部分。
左侧部分固定为 300px 宽度。
关于右侧部分，它可以缩小（缩小）到 300px。如果它比这更窄，右侧部分应该显示在底部，就像下图一样。

• 右侧部分应保持在右侧，除非宽度缩小到 300 像素以下。
• 如果低于 300px，则应显示在底部。
• 如果是长文本，则需要在右侧部分的边缘中断

在我的演示中，当字符长度较长时，它会在底部显示右侧部分。
它需要休息并从新行开始。它总是试图在 1 行中显示这一点。

如何在右侧显示右侧部分，以及需要中断的文本。

我想要的输出

July 22, 2013 11:34   Helloooooooooooooooooooooooooooooooooooooooooooooo     <= need break!
    John Smith        ooooooooooooooooooo!
      Avatar

HTML

<div class="Row">
    <div class="Box">
        <div class="Left">  
            <div class="posted_at">July 22, 2013 11:34</div>
            <div class="user">John Smith</div>
            <div class="avatar">avatar</div>
        </div>
    </div>


    <div class="Box">
        <div class="Right">
            <div class="body">Helloooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</div>
            <div class="image"></div>
        </div>
    </div>
</div>

CSS

div.Row{
    border:1px solid rgb(0, 0, 0);
    min-width: 300px;
    width: 100%;
    background-color:#ffffff;
    margin-bottom: 20px;
    margin-right: 20px;
    float:left;
    display:block;  
}

div.Box{
    padding:0px;
    text-align:center;
    float:left;
    }

div.Left{
    width:300px;
    padding-top:5px;
    padding-bottom:15px;
    text-align:center;
    color:#000000;
    clear:both;
}

div.LeftImage{
    margin: 15px 15px 15px 15px;
}

div.Right{
    padding-top:15px;
    padding-right:10px;
    text-align:left;
    color:#000000;
    clear:both;
    min-width: 300px;
    word-break: break-all;

}

div.posted_at{
    padding:5px;
}

div.icon{
    display:inline-block;
    padding: 10px;
}

div.icon img{
    width:100%;
    height:100%;
}

Answer 1

try this 

div.Row
       {
        border:1px solid rgb(0, 0, 0);
        min-width: 300px;
        width: 100%;
        background-color:#ffffff;
        margin-bottom: 20px;
        margin-right: 20px;
        float:left;
        display:block;  
       }
div.Box
     {
      padding:0px;
      text-align:center;
     float:left;
    }
div.Left
    {
    width:300px;
    padding-top:5px;
    padding-bottom:15px;
    text-align:center;
    color:#000000;
    clear:both;
   }

div.LeftImage
   {
   margin: 15px 15px 15px 15px;
   }

div.Right
   {
   padding-top:15px;
   padding-right:10px;
   text-align:left;
   max-width:300px; word-wrap:break-word;
  }

Answer 2

用这个

.Row{
    border:1px solid rgb(0, 0, 0);
    width: 300px;
    background-color:#ffffff;
    margin-bottom: 20px;
    margin-right: 20px;
    float:left;
    display:block;  
}

.Box{
    width:700px;
    padding:0px;
    text-align:center;
    float:right;
    }