填充元素和剪切文本之间的剩余宽度

我有一个页脚在博客上发布，帖子是动态的。页脚中有一些左对齐的元素，一个是右对齐的，另一个是填充剩余空间的元素。填充元素和剪切文本之间的剩余宽度

我想我可以用

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

填充元素和剪切文本之间的剩余宽度

回答

相关问题