Html CSS左浮动，内容和窗口宽度可变

我有一个可变的窗口大小和一个带有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>

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

这些块是引导导航头的块，所以我不能使用其他浮动来移动它们

这是一个用于增长文本的文本示例：

这就是我希望的结果，除了固定宽度和一行省略号：

只需添加css：

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

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

这是解决办法。 请注意，只有当您有一个普通的背景色时，它才会起作用

代码的灵感不止于

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

一,。我发现使用框大小更实用：边框框；：

二,。更改div varleft的宽度：

现在，你的div varleft不会进入其他街区

三,。将位置和溢出添加到varleft：

四,。使用伪元素创建省略号。。。并创建一个将隐藏。。。如果没有必要

#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=BCDE FGHI JKLMN OPQRS TUVWX YZabcd efghijklm nopqr stuvwx yz0123 456789； 设置间隔函数{ 如果$varleft.text.length>100 $varleft.text； $varleft.appendranchr.charAtMath.floorMath.random*ranchr.length； },100; }; 标题{ 边框：1px000； 高度：42px； 宽度：100%； 背景：白色； } 标题>*{ 框大小：边框框； } 对{ 边框：1px实心f00； 浮动：对； 宽度：150px； 高度：40px； } 左{ 边框：1px实心0f0； 浮动：左； 宽度：150px； 高度：40px； } 瓦勒夫{ 边框：1px实心00f； 浮动：左； 宽度：calc100%-300px； 高度：40px； 溢出：隐藏； 位置：相对位置； } 瓦勒夫：以前{ 内容：“…”； 位置：绝对位置； 右：0； 底部：0； } 瓦勒夫：之后{ 内容：； 位置：绝对位置； 右：0； 宽度：1米； 高度：40px； 背景：白色； } 测验 测验

---

标题是否有背景色而不是图像？如果是，我可能会有一个解决方案。您如何响应此请求？此外，我想为长内容提供第二行，然后用省略号截断字符串？您可以在->

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

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