html - HTML/CSS 横方向のテキスト ラップ

Question

本当に単純なことを達成しようとしていますが、何が間違っているのかわかりません。次のhtmlマークアップがあります: JSFiddle、目標は、画像よりも長い場合にテキストを折り返すことです。つまり、テキストは水平に折り返され、画像の高さを超えないようにする必要があります。

ただし、2 つの問題があります。テキストを編集できず、テキストが 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;
}

</p>