自动换行在 chrome 上的作用与其他浏览器不同

Question

我有一个包含新闻标题列表的网站。在大多数浏览器中，这些链接可以正确换行，但在 Google Chrome 中，文本会超出其容器。下面是 Firefox 和 Chrome 的示例...

Firefox http://www.mattconnolly.com/Examples/news-firefox.jpg Chrome http://www.mattconnolly.com/Examples/news-chrome.jpg

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>

这是一些正在应用的 CSS... ul { 边距：0； 填充：0； 宽度：100%； }

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;
}

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

Answer 1

我不得不去该网站查找问题，因为代码中的罪魁祸首实际上并未包含在问题中。

但是如果你去掉这个位：

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

从 style.css 的第 331 行开始，它在 Chrome 中也很好看。不确定那段代码应该做什么？

另外，不要同时给 li a 和 li span 一个 li 一个填充。更清洁、更易于维护的 imo。

Answer 2

在你的标签中添加display: inline-block和word-break: break-word;：

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