word wrap acting differently on chrome than other browsers
<p>I have a website that contains a list of news headlines. In most browsers, these links wrap correctly, but in Google Chrome, the text extends beyond it's container. Examples of Firefox and Chrome below...</p>

<p><a href="http://www.mattconnolly.com/Examples/news-firefox.jpg" rel="nofollow noreferrer">Firefox http://www.mattconnolly.com/Examples/news-firefox.jpg</a>
<a href="http://www.mattconnolly.com/Examples/news-chrome.jpg" rel="nofollow noreferrer">Chrome http://www.mattconnolly.com/Examples/news-chrome.jpg</a></p>

<p>The HTML is just a list of ul/li links...</p>

<pre><code>&lt;ul&gt;
&lt;li&gt;
&lt;a href="http://www.iiwengr.com/2016/05/23/tranmer-returns-to-iiw-as-surveying-technical-specialist/"&gt;TRANMER RETURNS TO IIW AS SURVEYING TECHNICAL SPECIALIST&lt;/a&gt;
&lt;span class="post-date"&gt;May 23, 2016&lt;/span&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href="http://www.iiwengr.com/2016/05/16/jasper-joins-iiw-as-construction-leader/"&gt;JASPER JOINS IIW AS CONSTRUCTION LEADER&lt;/a&gt;
&lt;span class="post-date"&gt;May 16, 2016&lt;/span&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href="http://www.iiwengr.com/2016/05/11/changing-a-citys-narrative-with-a-streetscape/"&gt;CHANGING A CITY’S NARRATIVE&lt;/a&gt;
&lt;span class="post-date"&gt;May 11, 2016&lt;/span&gt;
&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Here's some CSS that is being applied...
    ul {
        margin: 0;
        padding: 0;
        width: 100%;
    }</p>

<pre><code>ul li {
    border-bottom: 1px solid #dedfe0;
    list-style-type: none;
    padding-bottom: 5px;
    padding-left: 8%;
    padding-top: 5px;
    text-align: left;
}

ul li a {
    color: black;
    display: block;
    font-size: 1.1em;
    text-decoration: none;
    text-transform: uppercase;
    width: 80%;
    word-wrap: break-word;
}
</code></pre>

<p>Any advice on how to get consistent results would be much appreciated!</p>