Introduction
Sometimes we want text to wrap around images, elements or shapes in general. Whether is be implementing a drop cap, or inserting a cool graphic into a paragraph, there's a lot of reasons why someone might want to have text wrapping with a non-square container. The container can refine the shape-outside with one of the following:
- ellipse() - rounded shapes
- inset() - rectangle shapes
- circle() - circles
- polygon() - shapes with 3 or more vertices
- url() - generate shapes from an image
Float
The float css property places an element to the left or right side of its container. This is what allows text and inline elements to wrap around it. float can be one of the following values:
- left - The element must float on the left side of its containing block.
- right - The element must float on the right side of its containing block.
- none (default) - The element must not float.
- inline-start - The element must float on the start side of its containing block. That is the left side with ltr scripts, and the right side with rtl scripts.
- inline-end - The element must float on the end side of its containing block. That is the right side with ltr scripts, and the left side with rtl scripts.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida eget metus non lobortis. Integer ac imperdiet enim. Suspendisse tempor est sed ante aliquam, ut condimentum leo hendrerit. Maecenas ut pellentesque dolor, eget viverra lectus. Etiam at sapien nec quam suscipit feugiat. Proin at lectus eget diam semper congue. Praesent rutrum sapien at sapien tincidunt, quis tincidunt eros vulputate. Praesent varius sed nibh vel pretium.
Shape Outside
The shape-outside property defines the shape used to wrap inline content around a floated element. This can create visually interesting text flow effects around non-rectangular shapes.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod lacus nec mauris fringilla, ac rhoncus ipsum pulvinar. Praesent rhoncus purus at nulla cursus, vel finibus nulla tincidunt. Mauris ut orci aliquet, dignissim purus sed, pulvinar ipsum. Nullam laoreet eu urna ut cursus.