<p class="p" id="p">supercalifragilisticexpialidocious</p>

<button id="b" data-ww="break-word">TOGGLE word-wrap</button>

<p>See <a href="http://www.sitepoint.com/12-little-known-css-facts/">article</a>.</p>

body {
  font-family: Arial, sans-serif;
  text-align: center;
}

.p {
  font-size: 24px;
  text-align: center;
  width: 200px;
  margin: 20px auto;
  border: solid 1px black;
  min-height: 60px;
  word-wrap: break-word;
}

button {
  display: block;
  margin: 0 auto;
}

var p = document.getElementById('p'),
    b = document.getElementById('b');

b.onclick = function () {
  if (this.getAttribute('data-ww') === 'break-word') {
    p.style.wordWrap = 'normal';
    this.setAttribute('data-ww', 'normal');
  } else {
    p.style.wordWrap = 'break-word';
    this.setAttribute('data-ww', 'break-word');
  }
};