jQM 1.4 wrap long word no spaces

by Erik Zanker

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<div data-role="page" id="page1">
    <div data-role="header">    
		<h1>My Header</h1>
	</div>
	<div role="main" class="ui-content">
    
<ul data-role="listview" data-inset="true">
    <li><a href="#">
        <img src="http://lorempixel.com/80/80/food/1/" />
    <h2>[email protected]</h2>
    <p>Desc 1</p></a>
    </li>
    <li><a href="#">
        <img src="http://lorempixel.com/80/80/food/2/" />
    <h2>>[email protected]</h2>
    <p>Desc 2</p></a>
    </li>
    <li><a href="#">
        <img src="http://lorempixel.com/80/80/food/3/" />
    <h2>>[email protected]</h2>
    <p>Desc 3</p></a>
    </li>
</ul>    
    
    
    </div>
    <div data-role="footer" data-position="fixed" >    
        footer
	</div>
</div>

CSS

ul li h2 {
    white-space: normal !important;
    word-wrap:break-word;
    overflow-wrap: break-word;
}