CSS has a **word-wrap property** that allows long words to be broken and wrapped onto the next line. The `overflow-wrap` helps to avoid unusually long strings of text that cause layout problems due to overflow.

# Values
The `overflow-wrap` property can take one of the following values:
- **`normal`**: the default. The browser will break lines according to the normal line-breaking rules; words or unbroken strings will not break, even if they overflow the container.

- **`break-word`**: words or strings of characters that are too large to fit inside their container will break in an arbitrary place to force a line break. A hyphen character will not be inserted, even if the hyphens property is used.

- **`inherit`**: the targeted element must inherit the value of the overflow-wrap property defined on its immediate parent.

# Implementation

Here's a practical implementation of the `overflow-wrap` property. The second paragraph, with `id=Overflow`, specifies the additional `overflow-wrap=break-word` property and gives us the desired output.

body {
  padding: 20px;
  font-size: 20px;
}

p {
  margin: 0 auto;
  max-width: 150px;
  border: solid 2px #ccc;
  padding: 12px;
}

button {
  display: block;
  margin: 20px auto;
}

#Overflow {
  overflow-wrap: break-word;
  hyphens: auto;
}

<html>
 <head>
 </head>
 <body>
   <p>An unusually long word: HAHAAHAHAHAAHAHAHAAHAHAHAAHAHAHAAHAHAHAAHAHAAH</p>
   <p id="Overflow">An unusually long word: HAHAAHAHAHAAHAHAHAAHAHAHAAHAHAHAAHAHAHAAHAHAAH</p>
 </body>
</html>



// Async Tests Example
/*
window.onModulesLoaded = new Promise( function( resolve, reject ) {
  setTimeout(function() {
    pTag = document.querySelector("div");
    pTag.innerHTML = '';
    newVal = document.createElement("p");
    newVal.innerHTML = 'Hello World';
    pTag.appendChild(newVal);
    resolve();
  }, 100)
});
*/

codemirror

How to wrap text using CSS

Wrap long text using CSS overflow-wrap: break-word to prevent layout issues without hyphens.