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

HTML / CSS水平文本换行

1 个答案: