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

我有一个页脚在博客上的文章，文章是动态的。 页脚中有一些元素是左对齐的，一个是右对齐的，它们之间有一个应该填充剩余空间

我想我可以用

text-overflow:ellipsis

如果我将其设置为固定宽度，它就会工作，但此时，填充空间的元素太大，所以最后一个元素会断开到新行

添加

white-space:nowrap;

到外面的容器也没用

如果空间填充元素总是填充剩余的空间，即使它的内容不够大，这也是一个不错的奖励

这是我的小提琴，空间填充元素是

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

。。。

---

谢谢大家的帮助！也许有些人会将其标记为重复，但我认为与文本溢出的结合：省略号使其独特-我真的在搜索解决方案。

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

有一个硬编码常量表示flexible with div上的左/右填充和边框（

a.c

，在您的示例中），出于某种原因，存在1px调整以将浮动保持在一行上。（不太确定来源…）

小提琴：

固定宽度与浮动的混合

我对HTML做了如下轻微调整（移动

a.d

到

a.c

前面）：

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

---

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

听起来你想要一个固定的、流动的、固定的布局，这就是你在纯css中的做法。如果不是你的意思，请告诉我。查看小提琴：只需左右移动视口，您将看到中间部分是如何随着宽度而展开和收缩的

HTML

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

---

要触发省略号，您需要指定或计算

a.c

元素的宽度。或者，您可以使用jQuery计算

a.c

的理想宽度。您的需求有多灵活？我曾考虑过使用jQuery，但一个页面上有几十个这样的帖子页脚会带来很大的负载。除了省略号，我怎样才能让a.c只使用CSS来填充剩余的空间？在三个窄列上设置%宽度可以吗？也许，最好是固定宽度，甚至最好是最大宽度…这非常好。它可以很容易地扩展为两个左面板，有点像下面的：为了触发省略号，中间部分需要溢出：hidden.awesome！为了在更小的屏幕上进行更好的测试，我做了一些小的调整，这正是我所需要的。非常感谢。

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

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

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