HTML/CSS 가로 텍스트 줄 바꾸기

Question

나는 정말 간단한 것을 얻으려고 노력하고있다. 그러나 나는 잘못하고있는 것이 무엇인지 알 수 없다. 나는 다음과 같은 HTML 마크 업을 가지고있다 : JSFiddle, 목표는 이미지보다 길 때 텍스트를 감싸는 것이다. 즉 텍스트는 수평으로 감싸고 결코 이미지의 높이를 넘지 않아야한다.

두 가지 문제가 있습니다. 텍스트를 편집 할 수없고 텍스트가 DB에서 가져온 블록입니다.

Answer 1

당신이 다음에를 설정하면 <br/> 요소를 제거 할 수없는 경우 :이를 제거해야합니다

br { 
    display:none; 
} 

. 포장 문제의 원인이되는 단단한 줄 바꿈이 있습니다.

<br/> 요소를 제거 할 수 있으면 텍스트가 원하는 흐름에 더 가깝습니다. 그러나 이미지 아래의 텍스트 줄 바꿈을 중지하려면 포함 요소에 높이 (어쩌면 너비) 및 오버플로 규칙을 추가해야합니다.

HTML

<div class="footer-row-1"> 
    <a style="float: left; margin-right: 25px;" href="index.html"><img src="http://theliberalstore.com/products/media/Q-EmptyRedSlash.gif" alt=""></a> 
    <div class="textBlock"> // <--- added a container for the text block 
    <p> Some Really Really long <br /> 
text, text, text<br /> 
text, text, text<br /> 
text, text, text: <br /> 
text, text, text<br /> 
text, text,<br /> 
<br /> 
text, text, text<br /> 
text, text, text<br /> 
<br /> 
text, text, text <br /> 
text, text, text<br /> 
text, text, text<br /> 
<br /> 
text, text, text</p> 
    <p>text, text, text, text, text, text</p> 
     <p style="padding-top: 5px;" class="color-4">text, text, text, text, text, text</p> 
    </div> 
</div> 
<div class="footer-row-2"> 
    Another completely different content here 
</div>​​​ 

CSS

.footer-row-2 { 
    clear:both; 
} 

br { 
    display:none; 
} 

.textBlock { 
    width:300px; /* for demo, to force a scroll bar */ 
    height:100px; /* same as image */ 
    overflow-x:hidden; 
    overflow-y:scroll; 
}