CodePen Embed - word-break-break-word-example

<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-normal</title>
  </head>
  <body>
    <div class="container">
    <p class="text">
        The patient has been diagnosed with pneumonoultramicroscopicsilicovolcanoconiosis and will be taken into intensive care.
    </p>
  </div>
</body>
</html>

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

.container {
  height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(50deg, #4d7dee, #eeb524);
}

.text {
  background: white;
  border-radius: 8px;
  width: 240px;
  padding: 10px; 
  word-break: break-word;
  font-size: 20px;
}

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.