왜 문자 길이가 길 때 맨 아래에이 문자가 나타 납니까?

Question

나는 반응 형 디자인을 만들려고 노력하고 있습니다.

DEMO는 http://jsfiddle.net/tbuU8/

이이 이미지 같은 것을해야한다. 주로 왼쪽과 오른쪽과 같은 2 개의 섹션이 있습니다.
왼쪽 섹션은 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

01 23,516,

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

사용 나는 그 노력이

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

Answer 2

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