如何使用浮点数使文本溢出

Question

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

.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：使用块格式化上下文

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

2）在左边元素：

• 将float: left替换为overflow: hidden以创建新的块格式化上下文（这会导致左侧元素占用剩余的宽度）
• 添加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（调整大小以查看效果）

Answer 2

在CSS中，您需要为元素.right和.left设置固定宽度。

试试这个：

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

如果你想让它变得更漂亮，可以在.left右侧添加一些填充：

.left{
  width: 10%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  float: left;
  padding-right: 5px; 
}

确保您使用calc

在.right上对其进行说明

.right{
  width: calc(90% - 5px);
  float: right;
}

（只是为了使文字不会发生碰撞）

希望它有所帮助： - ）