html - 如何使文本溢出 float

Question

我在响应式布局上遇到溢出文本问题，左侧是文本，右侧是按钮的 div。我不想打破行。 jsfiddle.net(我不知道 div right 和 div left 的大小，只有容器)这不是工作示例，我想要收到的是。

.container{
  width:100%;
}
.left{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  float:left;
}
.right{
  float:right;
}

<div class="container">
<span class="left">text</span>
<div class="right"> Testing text  </div>
</div>
</div>

Answer 1

解决方案 #1:使用 flexbox

1) 在容器元素上:添加display: flex; 和white-space: nowrap;

2) 在右边的元素上:添加flex:1 让它增长到占用剩余的空间。

.container{
  width:100%;
  display: flex;
  white-space: nowrap;
}
.left{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid red; /* uncomment to see what's going on */
}
.right{
  flex: 1;
  border: 1px solid red; /* uncomment to see what's going on */
}

<div class="container">
<span class="left">left text</span>
<div class="right"> Testing text Testing text Testing text Testing text  </div>
 
</div>
</div>

Codepen demo (调整大小看效果)

---

解决方案#2:使用 block 格式化上下文

1) 更改标记以交换左右元素

2) 在左侧元素上:

• 将 float: left 替换为 overflow: hidden 以创建新的 block 格式化上下文(这会导致左侧元素占据剩余宽度)
• 添加display:block

.container{
  width:100%;
}
.left{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  //border: 1px solid red; /* uncomment to see what's going on */
  display: block;
}
.right{
  float:right;
  //border: 1px solid red; /* uncomment to see what's going on */
}

<div class="container">

<div class="right"> Testing text Testing text Testing text Testing text  </div>
 <span class="left">left text</span>
</div>
</div>

Codepen demo (调整大小看效果)