Opencart 中的面包屑溢出问题

Question

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

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

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

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

Answer 1

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

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

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

Answer 2

我确认 white-space: normal（和 white-space: break-all）不足以解决 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;}

这将解决您的问题。

Answer 3

将此东西添加到您的课程中。

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

这里你需要使用.breadcrumb li > a，因为将来标签内的产品名称如果要在里面添加任何其他标签然后li，那么它会影响到任何地方，所以最好使用.breadcrumb li > a。