плавающие элементы без обертывания (обрезать последний элемент)

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"> заполнило оставшееся пространство с конца предыдущего промежутка до конец закрывающей секции.

Если ширина видимого окна (макс. Ширина 960 пикселей, но иногда меньше) слишком узкая, чтобы увидеть все, последнее погружение должно быть все меньше и меньше и обрезать текст внутри него (вместо того, чтобы обертывать себя), используя что-то как переполнение текста: эллипсис ;.

Другими словами:

|[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, должны быть в элементе <nav> в HTML, а список элементов в нем логически равен <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, все показывают одинаковые результаты. Ни одна строка Javascript не пострадала при создании этой крошилки.

Я пробовал все, чтобы получить эллипсис там, но браузеры очень разборчивы, только позволяя это на встроенных элементах, и я не могу получить стилирование без использования inline-block. Так что это вне игры. Вы могли бы теоретически исправить некоторые JS там, чтобы сделать это, хотя, если это ДЕЙСТВИТЕЛЬНО важно, но я думаю, что это тоже отлично.

Enjoy :)