Заполнить оставшуюся ширину между элементами и вырезать текст

Question

У меня есть нижний колонтитул для сообщений в блоге, сообщения из динамического с. В нижнем колонтитуле есть некоторые элементы, выровненные по левому краю, выравнивающие по правому краю и один между ними, который должен заполнить оставшееся пространство.

Я думал, что я мог бы использовать

text-overflow:ellipsis 

, который работает, если я поставил его на ширину починки, но в данный момент, пространство заполнения элемент просто становится слишком большим, так что последним элементом перерывы в новую строку ,

Добавление

white-space:nowrap; 

внешнего контейнера не помогло.

Также было бы неплохим бонусом, если бы элемент заполнения пространства всегда заполнял оставшееся пространство, даже если его содержимое недостаточно велико.

Вот моя скрипка http://jsfiddle.net/MFxk5/, пространство заполнения элемент является

<a href="c" class="c">... 

Спасибо всем за помощь! Может быть, некоторые будут отмечать это как дубликат, но я думаю, что комбинация с переполнением текста: эллипсис делает это уникальным - я действительно искал решение.

Answer 1

Похоже, вы хотите, чтобы фиксированная неподвижная жидкость была здесь, как вы делаете это в чистом css. Если это не то, что вы имеете в виду, дайте мне знать. Сценарий для просмотра: http://jsfiddle.net/rE2NC/ просто перемещайте видовое окно влево и вправо, и вы увидите, как средняя расширяет контракты по ширине.

HTML

<div class="FooterContainer"> 
    <div class="Footer"> 
     <div class="Left">Left</div> 
     <div class="Middle">Middle</div> 
     <div class="Right">Right</div> 
    </div> 
</div> 

CSS

.FooterContainer { 
    width:100%; 
} 

.Footer { 
    padding-left:200px; //or whatever width you want the .Left to be 
    padding-right:200px; //or whatever width you want the .Right to be 
} 

.Left { 
    width:200px; //Should match the padding-left of .Footer 
    margin-left:-200px; //Should be the negative of the width 
    float:left; 
} 

.Right { 
    width:200px; //Should match the padding-right of .Footer 
    margin-right:-200px; //Should be the negative of the width 
    float:left; 
} 

.Middle { 
    width:100%; //This fills the rest 
    float:left; 
    overflow:hidden; //use this to make sure text dont flow out 
} 

Answer 2

JQuery Решение

Я начал с JQuery помощь раствором.

CSS-выглядит следующим образом:

div { 
    width: 100%; 
    overflow: auto; 
} 
a { 
    border: 1px solid gray; 
    margin: 3px; 
    height: 50px; 
    float: left; 
} 
.c { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 
.d { 
    float: right; 
} 

и функции JQuery:

$("div").each(function(){ 
    var innerWidth = 0; 
    $(this).find("a").not(".flex").each(function(){ 
     innerWidth += $(this).outerWidth(true); 
    }); 
    var flexWidth = $(this).width() - innerWidth - 9; /* padding + border + 1 */ 
    $(this).find(".flex").width(flexWidth); 
}); 

Там является жёстко константа, которая представляет собой левый/правый отступы и границы на гибкий с DIV (a.c в вашем примере), и по какой-то причине есть настройка 1px, чтобы поддерживать поплавки в одной строке. (Не совсем уверен в происхождении ...).

Fiddle: http://jsfiddle.net/audetwebdesign/HmvsN/

Микс из фиксированных ширин с поплавками

я сделал небольшую корректировку в HTML следующим образом (перемещение a.d перед a.c):

<div class="ex2"> 
    <a href="a" class="a">First column</a> 
    <a href="b" class="b">Second column</a> 
    <a href="d" class="d">Last column</a> 
    <a href="c" class="c flex">Very long text...</a> 
</div> 

и используйте следующий CSS:

.ex2 a { 
    border: 1px solid gray; 
    margin: 3px; 
    height: 50px;  
} 
.ex2 .a { 
    width: 90px; 
    float: left; 
} 
.ex2 .b { 
    width: 90px; 
    float: left; 
} 
.ex2 .c { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    display: block; 
    margin: 3px 100px 3px 199px; 
} 
.ex2 .d { 
    width: 90px; 
    float: right; 
} 

По существу, плавайте левые два элемента и правые, чтобы он обертывался вокруг более широкого. Ширина более широкого элемента имеет левое/правое поле для размещения плавающих элементов.

В целом, оба подхода имеют свою ценность, но, похоже, это большая работа за то, что мы получаем ...