Text Wrapping is EASY

1. Basic Text Wrap (Just Works™)

This text automatically wraps when it reaches the container boundary. No JavaScript needed. No complex calculations. It just works. 这是中文文本，也可以自动换行，没有任何问题。日本語のテキストも自動的に折り返されます。

/* That's it. Literally nothing special needed */
.container { width: 300px; }

2. Text Wrap Around Image (float)

This text wraps beautifully around the image using a simple float. The text flows naturally around the floated element. 文字会自动环绕图片，这是CSS最基本的功能之一。Frontend developers have been doing this since the 90s!

img { float: left; margin-right: 10px; }

3. Fancy Shape Wrapping (shape-outside)

This text wraps around a circular shape! Modern CSS can wrap text around ANY shape - circles, polygons, even custom paths. 这不是什么黑魔法，就是一行CSS。The shape-outside property makes this trivial.

.circle {
  float: left;
  shape-outside: circle(50%);
}

4. Flexbox DOES Wrap (flex-wrap)

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

.container {
  display: flex;
  flex-wrap: wrap; /* 就这一行！*/
}

5. Grid Auto-Wrap (auto-fit/auto-fill)

Grid 1

Grid 2

Grid 3

Grid 4

Grid 5

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

6. Dynamic Textbox (The "Impossible" Use Case)

Type in the box - text wraps automatically as you type!

/* Native textarea behavior - no JS needed for wrapping */
textarea {
  width: 100%;
  resize: both;
}

7. Breaking Long Words

Supercalifragilisticexpialidocious and Pneumonoultramicroscopicsilicovolcanoconiosis and 这是一个超级超级超级超级超级超级长的中文词语

.container {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

8. Newspaper-Style Columns

This text automatically flows into multiple columns like a newspaper. When one column fills up, the text continues in the next column. 这种多栏布局在CSS中只需要一行代码就能实现。No JavaScript. No complex calculations. Pure CSS magic that has been supported for years.

.container {
  column-count: 3;
  column-gap: 20px;
}

9. Container-Responsive Wrapping

Responsive Item 1

Responsive Item 2

Resize the container above (drag the corner) - items wrap based on container size!

@container (max-width: 300px) {
  .items { flex-direction: column; }
}

Text Wrapping is NOT Hard 🎯