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调整以保持浮点数单线。（不太确定原点......）。

小提琴：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;
}

基本上，将左侧两个元素和右侧元素浮动，使其围绕较宽的元素。较宽元素的宽度具有左/右边距以容纳浮动元素。

总的来说，这两种方法都有其优点，但对于我们得到的东西似乎有很多工作......

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

2 个答案: