展會結束時，溢出的CSS

我有我的網站上的麪包屑（|象徵我有它的面積）：展會結束時，溢出的CSS

| Home -> Some thing -> Some deeper thing           |

目前，它擁有overflow: hidden集，所以當它變得太長，它會導致：

| Home -> Some thing -> Some deeper thing -> Some page with very long and very import|

我試圖做到的，是隱藏文本，而不是結束的開始，所以它應該是：

| me thing -> Some deeper thing -> Some page with very long and very important title |

如何做到這一點？

來源

2014-09-23 fracz

可能重複[溢出到左不是右]（http://stackoverflow.com/問題/ 218065 /溢出到左側而不是右側） – 2014-09-23 19:51:18

在@Bartdude鏈接的問題中，文本始終與右側對齊。我希望它能夠與左側對齊，如果它適合這個區域，那麼這個問題就會大大地改變。 – fracz 2014-09-23 19:57:06

你可以用2 divs做一些簡單的JavaScript這樣的：

window.onload = function(){ 
 
    var inner = document.getElementById("inner").offsetWidth; 
 
    var outer = document.getElementById("outer").offsetWidth; 
 
    if(outer > inner) 
 
    document.getElementById("inner").style.left = 0; 
 
}

#outer { 
 
    overflow: hidden; 
 
    width: 500px; 
 
    height: 20px; 
 
    position: absolute; 
 
} 
 
#inner { 
 
    white-space: nowrap; 
 
    position: absolute; 
 
    right: 0; 
 
}

<div id="outer"><div id="inner">Home -> Some thing -> Some deeper thing -> Some page with very long and very important title</div></div>

的

來源

2014-09-23 19:56:00 imtheman

這總是將文本向右對齊，這在我的情況中不是期望的。 – fracz 2014-09-23 19:59:45

看看我的更新。如果您將外部div更改爲1000px，則它將保持在左側。 – imtheman 2014-09-23 20:07:37

展會結束時，溢出的CSS

回答

相關問題