HTML/CSS Horizontal text wrap

Question

I'm trying to achieve something really simple, but i can't figure out what im doing wrong. I have the following html markup: JSFiddle, the goal is to make the text wrap when its longer than the image i.e. the text should wrap horizontally and never exceed the image's height.

There are two problems though: i can't edit the text and the text is a block, fetched from the DB.

Which parts of the markup can you change? For instance could you wrap the text block in another element? Also, are the <br/> being fetched from the database? Hard-coded newlines might be a problem here. — andyb
– andyb, Commented Oct 11, 2012 at 8:49
yes i can change the markup around, but i can't change the block contents itself, although i might be able to remove the newlines — Anonymous
– Anonymous, Commented Oct 11, 2012 at 8:57

andyb · Accepted Answer · 2012-10-11 09:16:56Z

2

If you cannot remove the <br/> elements, then setting them to:

br {
    display:none;
}

should remove them. It is the presence of the hard line-breaks that is causing the wrapping problem.

If you can remove the <br/> elements then the text be closer to the flow you require. However, a height (maybe width) and overflow rules need to be added to a containing element in order to stop the text wrapping under the image.

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

answered Oct 11, 2012 at 9:16

andyb

43.9k12 gold badges126 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Anonymous Over a year ago

Thanks but the client is adamant that scrolling is unacceptable, ill continue looking for a cleaner way.

andyb Over a year ago

So what is supposed to happen if the text length is so long that it takes up all the available width and height next to the image? Seems that putting an ellipsis and/or read more type link at the end and hiding any remaining text is the only solution if the client doesn't want any text below the image.

Anonymous Over a year ago

It should split in paragraphs, but i guess ill have to atleast put some tags to mark where. I'm still experimenting with different solutions.

Collectives™ on Stack Overflow

HTML/CSS Horizontal text wrap

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related