<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');
}
};
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.