填充元素和剪切文本之間的剩餘寬度

我有一個頁腳在博客上發佈，帖子是動態的。頁腳中有一些左對齊的元素，一個是右對齊的，另一個是填充剩餘空間的元素。填充元素和剪切文本之間的剩餘寬度

我想我可以用

text-overflow:ellipsis

，如果我將它設置爲一個固定寬度的作品，但在那一刻，空間填充元素只是得到這樣的最後一個元素休息，以一種新的太行大。

添加

white-space:nowrap;

外容器沒有幫助。

如果填充空間的元素總是填充剩餘空間，即使內容不夠大，也會是一個不錯的好處。

這裏是我的小提琴http://jsfiddle.net/MFxk5/，空間填充元素是

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

感謝大家的幫忙！也許有些人會將其標記爲重複，但我認爲與文本溢出的結合：省略號使得這種獨特 - 我真的在尋找解決方案。

來源

2013-06-05 Raphael Jeger

要觸發省略號，你需要或者指定或'a.c'元素計算的寬度。或者，您可以使用jQuery來計算'a.c'的理想寬度。你的要求有多靈活？ –

我曾考慮過使用jQuery，但是在一頁上有很多這樣的頁腳後綴會帶來很多負擔。除了省略號之外，我怎樣才能讓a.c只用CSS填充剩餘空間？ –

可以在三個窄列上設置％寬度嗎？ –

聽起來像你想要一個固定流體固定的佈局，這是你如何在純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 
}

來源

2013-06-05 19:30:01

這工作相當好。它可以很容易地擴展爲有兩個左面板有點像下面這樣：http://jsfiddle.net/audetwebdesign/rE2NC/2/爲了觸發省略號，中間部分需要溢出：隱藏。 –

真棒！爲了在較小的屏幕上進行更好的測試做了一些小的調整，這正是我所需要的。謝謝！ http://jsfiddle.net/rE2NC/4/ –

-1

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調整，以保持浮線在一條線上。（不太確定起源...）。

小提琴：http://jsfiddle.net/audetwebdesign/HmvsN/

與浮子固定寬度

我作了輕微調整到如下的HTML的混合物（在a.c前方移動a.d）：

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

本質上，浮動左邊的兩個元素和右邊的一個，使它環繞更寬的一個。較寬元素的寬度具有左/右邊距以適應浮動元素。

總體而言，兩種方法都有優點，但對於我們所得到的結果似乎有很多工作要做......

來源

2013-06-05 19:02:17

填充元素和剪切文本之間的剩餘寬度

回答

相關問題