html - HTML/CSS 水平文本换行

Question

我正在尝试实现一些非常简单的事情，但我无法弄清楚我做错了什么。我有以下 html 标记：JSFiddle，目标是使文本在比图像长时换行，即文本应该水平换行并且永远不会超过图像的高度。

但是有两个问题：我无法编辑文本并且文本是一个块，从数据库中获取。

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>