<h2>overflow-wrap/word-wrap demo</h2>

<p>This is the first time I've seen the word&nbsp;Pneumonoultramicroscopicsilicovolcanoconiosis. It's a long one.</p>

<button>Toggle Overflow Wrap</button>
body {
  padding: 20px;
  font-size: 20px;

h2 {
  text-align: center;
  margin-bottom: 14px;

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

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

.ow {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
document.querySelector('button').addEventListener('click', function () {
}, false);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.