CSS 左浮动，内容可变，宽度 windows

Question

我有一个变量 windows 大小和一个 header 有 3 个浮动块。第一个是固定宽度向右浮动，第二个是固定宽度向左浮动。最后一个（varleft）向左浮动，内容长度可变。

<div id="header">
  <div id="right">test</div>
  <div id="left">test</div>
  <div id="varleft">very long text very long text very long text very long text very long text very long text very long text very long text very long text </div>
</div>

我想防止第三个块在宽度增加时进入其他块之下，此外，我想给它一个第二行的长内容，然后用省略号截断字符串。

这些方块是 bootstrap nav-header 的方块，所以我不能使用其他方块来移动它们。

这是增加文本的文本示例： https://jsfiddle.net/mjq2tum0/

这是我想要的结果（固定宽度和 one-line 省略号除外）： https://jsfiddle.net/o90sm39L/

Answer 1

只需添加您的 css:

#varleft {
   max-width: calc(100% - 306px);
}

Answer 2

I want to prevent this third block from going under other blocks while it grows in its width, moreover, I want to give it a second line for long content, and then truncate string with ellipsis.

这是解决方案。 请注意，只有当您使用纯色背景时，它才有效。

代码的灵感来自 this awesome article

如果这对您来说不是问题：

1.我觉得用起来比较实用 box-sizing: border-box; :

#header > * {
  box-sizing: border-box;
}

2. 更改 div varleft 的宽度：

  width: calc(100% - 300px); // 100% minus the width of #right and #left

现在，你的divvarleft不会在其他方块下面了

3.在varleft上加一个位置和一个溢出：

  overflow: hidden;
  position: relative;

4. 使用伪元素创建省略号 ... 并创建一个 div 以在不需要时隐藏 ...

#varleft:before {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
}
#varleft:after {
  content: '';
  position: absolute;
  right: 0;
  width: 1em;
  height: 40px;
  background: white;
}

这是一个片段：

$(function(){
  var ranchr = "A BCDE FGHI JKLMN OPQRS TUVWX YZabcd efghijklm nopqr stuvwx yz0123 456789";
 setInterval(function(){
    if($("#varleft").text().length>100)
        $("#varleft").text("");
   $("#varleft").append(ranchr.charAt(Math.floor(Math.random() * ranchr.length)));
  },100);
});

#header{
  border: 1px solid #000;
  height: 42px;
  width: 100%;
  background: white;
}
#header > * {
  box-sizing: border-box;
}
#right{
  border: 1px solid #f00;
  float: right;
  width: 150px;
  height: 40px;
}
#left{
  border: 1px solid #0f0;
  float: left;
  width: 150px;
  height: 40px;
}
#varleft{
  border: 1px solid #00f;
  float: left;
  width: calc(100% - 300px);
  height: 40px;
  overflow: hidden;
  position: relative;
}

#varleft:before {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
}
#varleft:after {
  content: '';
  position: absolute;
  right: 0;
  width: 1em;
  height: 40px;
  background: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
<div id="right">test</div>
<div id="left">test</div>
<div id="varleft"></div>
</div>

CSS 左浮动，内容可变，宽度 windows

CSS left float with variable content and windows width

html

css

css-float