word-wrap: normal;It's Supercalifragilisticexpialidocious! Even though the sound of it is something quite atrocious. If you say it loud enough you'll always sound precocious: Supercalifragilisticexpialidocious!
word-wrap: break-word;It's Supercalifragilisticexpialidocious! Even though the sound of it is something quite atrocious. If you say it loud enough you'll always sound precocious: Supercalifragilisticexpialidocious!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Word-Wrap</title>
<script src="jquery.min.js"></script>
<script src="prettify.js"></script>
<script src="presentation-mechanics.js"></script>
<link rel="stylesheet" href="accessible-css-dialog.css">
<style>
div.pagelevel {
border: 1px solid #888;
float: left;
margin-right: 150px;
width: 150px;
}
</style></head>
<body>
<h1>Word-Wrap</h1>
<div class="pagelevel">
<h2><code>word-wrap: normal;</code></h2>
<p style="word-wrap: normal;">It's Supercalifragilisticexpialidocious! Even though the sound of it is something quite atrocious. If you say it loud enough you'll always sound precocious: Supercalifragilisticexpialidocious!</p>
</div>
<div class="pagelevel">
<h2><code>word-wrap: break-word;</code></h2>
<p style="word-wrap: break-word;">It's Supercalifragilisticexpialidocious! Even though the sound of it is something quite atrocious. If you say it loud enough you'll always sound precocious: Supercalifragilisticexpialidocious!</p>
</div>
<div id="dialog" role="alertdialog" tabindex="-1" aria-labelledby="dialog-head" aria-describedby="dialog-body"></div><div class="button-container"><a href="#source-code" id="view-source">Source</a> <button id="dialog-trigger">Results</button></div><div id="source-code"><a href="#" id="x" aria-label="close">×</a></div></body>
</html>