浮動元素，而無需換行（截斷最後一個元素）

Question

我見過很多類似的問題，但沒有，我可以找到似乎滿足了我想要做的事。我的網站上有一些麪包屑。目前的HTML看起來像這樣：

<div class="breadcrumb"> 
    <span>Home</span> 
    <span>Section</span> 
    <span>Subsection</span> 
    <span class="last">current page</span> 
</div> 

我需要一些事情發生，我無法弄清楚。除了最後<div>應該尺寸水平基於<span>。自從文本麪包屑的最終格式會看起來像一個明顯的部分，將<span class="last">需求，以填補之前的跨度結束的剩餘空間大小封閉部分結束。

如果封閉視圖寬度（最大寬度爲960px，但有時較小）太窄而無法看到所有內容，則最後一次潛水應該越來越小，並且使用某些內容截斷文本內的文本（而不是自身打包）像文本溢出：省略號;.

換句話說：

|[home][Agendas][Animal Service Center][12/23/2012: ASCMV Meeting Agenda  ]| 

由於窗口縮小，就變成了：

|[home][Agendas][Animal Service Center][12/23/2012: ASCMV Meeting Agenda]| 

進一步變爲：

|[home][Agendas][Animal Service Center][12/23/2012: ASCMV Me...]| 

這是可行的CSS？我和我一起玩的東西無法工作。

Answer 1

一個純CSS的方法是適用white-space:nowrap到麪包屑，設置.last元素的東西很長的寬度，和麪包屑的overflow屬性設置爲隱藏：

然後，您可以根據自己想要的右邊緣看，你可以在.last中添加一個設計鉤跨度，將其絕對定位在right:0px;，將.last保持爲靜態（默認），以便定位網格是外部容器，然後使用此跨度來僞造最後一個麪包屑的右邊緣（如果需要）。

.breadcrumb{ 
    white-space:nowrap;position:relative 
    background:lightblue; 
    height:1.7em;line-height:1.5em; 
    overflow:hidden;padding:3px;} 
.breadcrumb > span{ 
    display:inline-block;background:#eee 
    margin-right:3px;padding:1px 5px } 
.last {width:2000px} 
.last span{position:absolute;right:0px; 
    background:lightblue;width:3px; 
    top:-1px;bottom:-5px;} 

見這個例子在這裏工作：http://jsfiddle.net/mhfaust/Mtc8g/2/

Answer 2

嗯，我已經能夠得到它都在那裏，除了省略號：demo here。

首先我清理你的HTML像瘋了一樣。像crumbtrails這樣的導航元素應該位於HTML元素中的<nav>元素中，並且其中的項目列表在邏輯上應該是無處不在的應該是<ul>。而且我不剝離所需要的所有類，結果是：

<nav id="crumbtrail"> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Section</a></li> 
     <li><a href="#">Subsection</a></li> 
     <li><a href="#">current page</a></li> 
    </ul> 
</nav> 

的CSS，好了，不能推薦比跳水更在那裏，並嘗試瞭解我所做的：

nav { 
    font-family:Tahoma,Arial,sans-serif; 
    color:white; 
    max-width:500px; 
} 
nav ul { 
    background:url(http://wasimshaikh.com/demo/breadcrumbs/bcnav-current.png) no-repeat right; 
    font-size:0; 
    height:27px; 
    line-height:27px; 
    list-style:none; 
    white-space:nowrap; 
    overflow:hidden; 
} 
nav li { 
    background:url(http://wasimshaikh.com/demo/breadcrumbs/bcnav-left.png) no-repeat left; 
    font-size:10pt; 
    height:27px; 
    display:inline-block; 
    position:relative; 
} 
nav li:after { 
    content:url(http://wasimshaikh.com/demo/breadcrumbs/bcnav-right.png); 
    position:absolute; 
    z-index:5; 
    top:0; 
    right:-16px; 
} 
nav li a { 
    color:white; 
    display:block; 
    height:100%; 
    width:100%; 
    padding:0 16px 0 32px; 
    text-decoration:none; 
} 
nav li:first-child a { 
    padding-left:16px; 
} 
nav li:last-child { 
    background:none; 
    border:0; 
} 
nav li:last-child:after { 
    content:none; 
} 

正如你從the result可以看到，它的工作原理。我在Chrome最新測試版，FF20，IE9和IE10中測試了它們，都顯示了相同的結果。在製作這款crumbtrail時，沒有一行Javascript受到傷害。

我已經嘗試了一切，在那裏得到省略號，但瀏覽器真的挑剔只允許內聯元素，並且我不能在沒有使用inline-block時完成樣式。所以這是沒有用的。理論上你可以修補一些JS來做到這一點，但如果它真的很重要，但我認爲這也可以。

享受:)