Opencart中的麪包屑溢出問題

我的產品名稱非常長，需要保持很長時間。當面包屑顯示產品頁面時，如果屏幕很小（例如移動視圖），麪包屑會溢出佈局，並導致瀏覽器無法正確顯示頁面。Opencart中的麪包屑溢出問題

我嘗試添加<p class="overflow-ellipsis">，也<p class="overflow-visible">產品頁面的DIV，沒有工作，我嘗試添加text-overflow: ellipsis;也text-overflow: visible;在麪包屑部分的CSS，這也沒有工作，我也改變了white-space: nowrap;在麪包屑css到white-space: normal;，它仍然沒有解決這個問題。這裏是我的一個頁面的鏈接，例如，請將屏幕縮小或在移動設備上查看以複製問題。

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

我將需要的產品名稱留在佈局（幀），並優選進行到第二行，而不是溢流頁面。請注意，由於搜索引擎優化問題，我不想使用隱藏的可見性或任何東西來切斷它。

來源

2017-07-14 Schwann

分享任何圖像或代碼，我們不能承擔這麼多:) – Aslam

提供一些代碼，以顯示你想要什麼樣子，爲什麼不發揮作用。另外，你有沒有嘗試過「斷字：打破所有;'？ – fen1x

@hunzaboy我剛剛添加鏈接來複制問題。 – Schwann

套裝white-space您的麪包屑：

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

我用!important覆蓋任何其他代碼.breadcrumb > li，但你應該知道這是不是一個好的做法。

來源

2017-07-14 05:48:29 fen1x

問題是我已經這樣做了，它沒有改變任何東西 – Schwann

你究竟是如何添加它的？引導程序的默認代碼可能會覆蓋它 – fen1x

我向CSS添加了正常的代碼 – Schwann

添加這個東西你的類。

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

在這裏，你需要在今後的使用.breadcrumb li > a因爲產品名稱的標籤內，如果將添加然後李內的任何其他標籤就會影響到無所不在，所以最好就是使用.breadcrumb LI>一個。

來源

2017-07-14 05:49:23

我上面的，它也是在這一問題解釋說，它並沒有改變任何東西 – Schwann

你說的是這個東西時我對嗎？ https://nimbus.everhelper.me/client/notes/share/1013480/wd53y7z2vr4q91txrguk –

這是完全正確的，但它不能通過在CSS中將nowrap改爲normal來解決 – Schwann

Opencart中的麪包屑溢出問題

回答

相關問題