How to Make Text Flow Around Rounded Divs?

Enhancing Text Placement within Rounded Divs

Creating rounded divs that seamlessly accommodate text can be achieved using CSS techniques. However, by default, rounded divs often display text in a squared format.

Current Situation:

As demonstrated in the provided JSFiddle (http://jsfiddle.net/kUJq8/), the following CSS produces a round div with squared text:

div {
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: #333;
    color: #FFF;
}

Solution 1: Shape-Outside

Modern browsers support the shape-outside property, offering a direct solution for wrapping text around complex shapes. For a circular shape, the syntax would be:

div {
    width: 320px;
    height: 320px;
    shape-outside: circle(50%);
    background: #333;
    color: #FFF;
}

Note: Browser support for shape-outside should be considered.

Solution 2: Pseudo Element Gradients

Alternative methods involve using images or gradients to define the circular shape. With the latter approach, four pseudo elements are employed:

div:not([class]) {
  width: 10em;
  height: 10em;
  border-radius: 50%;
  background: #333;
}

div[class]:before {
  /* ... */
}

div[class][id]:before {
  /* ... */
}

div[class]:after {
  /* ... */
}

div[class][id]:after {
  /* ... */
}

By using carefully positioned radial gradients, these pseudo elements effectively create the illusion of a circular shape. When combined with the main div's rounded corners, the text wraps around the circle as desired.

The above is the detailed content of How to Make Text Flow Around Rounded Divs?. For more information, please follow other related articles on the PHP Chinese website!