展会结束时，溢出的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

回答

相关问题