html - 无法让文本在产品目录中换行/换行

Question

在产品标题较长的元素中，当屏幕调整大小时和重叠时，文本无法换行/换行。我使用了自动换行、空格、断字和溢出换行，但文本拒绝中断。请参阅下面的代码，您还可以在此处查看网站上的行为:goo.gl/VsFBkx

.product-item-name {
font-size: 16px;
font-family: 'Work Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
font-weight: normal !important;
}
styles-m.css:1
.product-item-name {
display: block;
margin: 5px 0;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
font-size: 15px;
}

Answer 1

在您链接的网页上，在 custom.css 的第 188 行，您具有此属性:

a {
    white-space: nowrap !important;
}

这表示所有链接都将拒绝换行，并且因为 !important 标志在那里，所以它不能被覆盖。删除它，您的链接标题将换行。

为了将来引用，我强烈建议您熟悉网络浏览器中内置的开发人员工具(谷歌“[浏览器名称] 开发人员工具”)。使用 Chrome 的开发工具很容易找到这个问题。