CodePen Embed - difference-between-overflow-wrap-breakword-and-overflow-wrap-anywhere

<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>overflow-wrap-anywhere</title>
  </head>
  <body>
    <div class="container">
      <h1>overflow-wrap: break-word with width of min-content</h1>
      <p class="text-break-word">
        Sometimes you get so boooooooooooooooooooreeeed!
      </p>
      
      <h1>overflow-wrap: anywhere with width of min-content</h1>
      <p class="text-anywhere">
        Sometimes you get so boooooooooooooooooooreeeed!
      </p>
  </div>
</body>
</html>

* {
  margin: 0;
  box-sizing: border-box;
}

h1 {
  width: min-content;
  margin: 0 10px;
  padding: 5px 10px;
  border-radius: 4px;
  background-color: #000;
  color: #fff;
  font-weight: normal;
  font-size: 0.9em;
  white-space: nowrap;
  transform: translateY(50%);
}

.container {
  min-width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #b3f6d8, #007ea7);
}

.text-anywhere {
  background: white;
  border-radius: 8px;
  padding: 20px;
  font-size: 20px;
  width: min-content;
  overflow-wrap: anywhere;
}

.text-break-word {
  background: white;
  border-radius: 8px;
  padding: 20px;
  font-size: 20px;
  width: min-content;
  overflow-wrap: break-word;
}

This Pen is owned by Necati Özmen on CodePen. It is a fork of this Pen.

See more by @Necati-zmen on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.