Html word wrap在chrome上的表现与其他浏览器不同

我有一个包含新闻标题列表的网站。在大多数浏览器中，这些链接包装正确，但在谷歌浏览器中，文本超出了它的容器。下面是Firefox和Chrome的示例

HTML只是一个ul/li链接列表

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

---

任何关于如何获得一致结果的建议都将不胜感激

添加

显示：内联块
和
分词：分词在a标记中：

ul li a {
   display: inline-block;
   word-break: break-word;
}

我不得不去网站查找问题，因为代码中的罪犯实际上没有包含在问题中

但如果您删除此位：

#home-widget-three #secondary .widget ul li a:after {
    content:"\a";
    white-space: pre;
}

从style.css的第331行开始，它在Chrome中看起来也不错。不知道那段代码应该做什么

此外，请在此处添加有意义的代码和问题描述，而不是同时为
li a
和
li span
指定宽度。不要只是链接到需要修复的站点——否则，一旦问题解决或者你链接到的站点无法访问，这个问题将对未来的访问者失去任何价值。发布一个能证明你的问题的帖子会帮助你得到更好的答案。有关更多信息，请参阅“谢谢！”！很抱歉最初的帖子。。。编辑了更多的信息他已经有了
wordwrap:break-word
。从
display:block
更改为
inline block
不会更改相关站点上的任何内容。感谢powerbouy，这就是罪魁祸首。我真的不记得那元素最初是用来干什么的。我认为这是试图在链接后添加换行符，但这是不必要的。
#home-widget-three #secondary .widget ul li a:after {
    content:"\a";
    white-space: pre;
}