CODEWITHSUNDEEP
javascriptcss
Lukas
Lukas

Reputation: 10360

Creating an outline with JS / CSS that wraps a text

Say you have an image with float:left; and a text that flows around the image.

The code is pretty simple:

<img src="image.jpg" style="float:left">
<p style="outline: 1px dotted blue">Lorem ipsum...</p>

Is there a way to display an outline, that wraps around the text but not around the image. A normal outline on the text gives you this:

enter image description here

But I want this:

enter image description here

using a display:inline; on the <p> displays an outline on each line, not 'blockwise' oun the text's visible boundaries.

CSS3 is legit, any hardcore CSS/JS is permitted...

Upvotes: 4

Views: 180

Answers (2)

pollirrata
pollirrata

Reputation: 5286

Check this jsfiddle http://jsfiddle.net/pollirrata/rKaHk/1/

It is not fancy but makes the job

Upvotes: 0

Mike Robinson
Mike Robinson

Reputation: 25159

You can try something like this. Shift the image up and to the left so that it obscures the regular border. Then give it it's own border to complete the illusion.

<article>
 <img src="image.jpg" style="float:left">
 <p>Lorem ipsum...</p>
</article>


article {
 border: 1px blue dotted;
}

img {
 background-color: white;
 border-right: 1px blue dotted;
 border-bottom: 1px blue dotted;
 margin: -1px 0 0 -1px;
 padding: 0 5px 10px 0;
}

Here's the fiddle: http://jsfiddle.net/KW45t/

Upvotes: 3

Related Questions