Wednesday, December 19th, 2007

CSS Text Wrap: Squeeze that text around any line

Category: CSS, Utility

Sick of those straight lines that your text follows? Rounded corners can only do so much? Now, a new tool is here to help you out: CSS Text Wrap.

The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want. All you have to do is draw the left and right edges below and then copy the generated code to your website

On the flip side, you get a choice of inline HTML (below), XHTML with CSS classes, or JavaScript.

  1. <div style="float:left;clear:left;height:15px;width:4px"></div><div style="float:right;clear:right;height:15px;width:3px"></div><div style="float:left;clear:left;height:15px;width:13px"></div><div style="float:right;clear:right;height:15px;width:8px"></div><div style="float:left;clear:left;height:15px;width:22px"></div><div style="float:right;clear:right;height:15px;width:14px"></div><div style="float:left;clear:left;height:15px;width:30px"></div><div style="float:right;clear:right;height:15px;width:19px"></div>

CSS Text Wrap

Posted by Dion Almaer at 6:57 am
1 Comment

4.2 rating from 40 votes

1 Comment »

Comments feed TrackBack URI

very cool. reminded me of an old demo I did (wrapping text around an image using just javascript and a little PHP –

must show this to the cow-orkers

Comment by kae — December 19, 2007

Leave a comment

You must be logged in to post a comment.