html - 具有可变内容和窗口宽度的 CSS 左浮动

Question

我有一个可变的窗口大小和一个带有 3 个 float block 的标题。 第一个是固定宽度向右浮动，第二个是固定宽度向左浮动。最后一个 (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>

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

这些 block 是 bootstrap nav-header 的 block ，所以我只能使用 float 来移动它们。

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

这是我希望的结果(固定宽度和单行省略号除外): https://jsfiddle.net/o90sm39L/

Answer 1

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

现在，您的 div varleft 不会在其他 block 下

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>