How to Make Text Wrap Around a Rounded Div with CSS?

How to Keep Text Inside a Rounded Div Using CSS

In this question, the user wanted to have a round div with text inside, as seen in the provided image. However, the text in the user's round div appeared squared off.

Using CSS

To achieve the desired effect using CSS, the user could consider the following options:

1. Utilizing shape-outside

This property allows for the customization of the wrapping of inline content around a non-rectangular shape. It's a modern solution with good browser support, as mentioned in the Mozilla Developer Network documentation.

2. Creating a Shape with Background Gradients

For a circular div, you can create sections of a radial gradient to make the text wrap around it. Here's an example:

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

div[class]:before {
  content: '';
  float: left;
  clear: left;
  height: 5em;
  width: 5em;
  background: radial-gradient(circle at bottom right, transparent 69%, red 69%);
}

div[class][id]:before {
  background: radial-gradient(circle at top right, transparent 69%, red 69%);
}

div[class]:after {
  content: '';
  float: right;
  clear: right;
  height: 5em;
  width: 5em;
  background: radial-gradient(circle at bottom left, transparent 69%, red 69%);
}

div[class][id]:after {
  background: radial-gradient(circle at top left, transparent 69%, red 69%);
}

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