在CSS中溢出时显示文本结尾

Question

我的网站上有一个面包屑（|象征着我所拥有的区域）：

| 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 |

怎么做？

Answer 1

你可以使用2 divs和一些简单的javascript这样做：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;