Geek Answers Handbook

Creating a path using JS / CSS that wraps text

Say you have an image with float:left; and text that wraps 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 the outline that wraps around the text, but not around the image. A normal text outline gives you the following:

enter image description here

But I want this:

enter image description here

using display:inline; on <p> , displays the outline on each line, and not "block by block" at the borders of the visible text.

CSS3 is legal; any CSS / JS hardcore is allowed ...

+4
source share
2 answers

You can try something like this. Move the image up and to the left so that it obscures the normal border. Then give her your 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/

+3
source

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

This is not a fantasy, but it does the job.

0
source

More articles:


All Articles