Question

我的产品名称很长，需要保留很长时间。当面包屑显示产品页面时，如果屏幕较小（例如移动视图），面包屑会溢出布局，导致浏览器无法正确显示页面。

我尝试将<p class="overflow-ellipsis">和<p class="overflow-visible">添加到产品页面的DIV，该页面无效，我尝试添加text-overflow: ellipsis;以及{{1}在breadcrumb部分的css中也没有用，我还将breadcrumb css中的text-overflow: visible;更改为white-space: nowrap;，但仍然没有解决问题。以下是我的某个页面的链接，例如，请将屏幕缩小或在移动设备中查看以复制问题。

http://www.nativeamericanwholesale.com/$80-tag-authentic-made-by-charlene-little-navajo-kingman-turquoise-wrap-bracelet

我需要将产品名称保留在布局（框架）中，并且最好转到第二行而不是溢出页面。请注意，由于搜索引擎优化问题，我不想使用隐藏的可见性或任何东西来删除它。

Answer 1

为您的面包屑设置white-space：

.breadcrumb > li {
    white-space: normal!important;
}

我使用!important覆盖.breadcrumb > li的任何其他代码，但您应该知道这不是一个好习惯。

Answer 2

将此内容添加到您的课程中。

.breadcrumb li > a {
    white-space: normal;
}

在这里你需要使用.breadcrumb li > a，因为将来在标签内部的产品名称如果要添加任何其他标签然后它会影响到任何地方，所以更好的是使用.breadcrumb li＆gt;一个。

Answer 3

我确认空格：正常（和空格：全部）不足以解决 OpenCart 的面包屑问题。

.breadcrumb>li:after{top:50%;transform:translateY(-50%) rotate( -45deg );} 
.breadcrumb>li{white-space:normal;display:table-cell;vertical-align:middle;}
.breadcrumb>li:last-child::after{display:none;}

这将解决您的问题。

Opencart中的Breadcrumb溢出问题

3 个答案: