Question

我在100％宽度的flex行中有两个文本字段。一个位于左侧，另一个位于右侧。当容器（窗口）从右侧调整大小（小）时，我希望右侧的文本重叠/覆盖左侧的文本。

解决方案不得使用绝对定位。左侧文本具有左侧边距，右侧文本必须停在该边距处。文本容器有目的地是100％宽度的行。

小提琴不是布局和调整大小测试的最佳平台，但是https://jsfiddle.net/Lcjcyp4g/6/

位置：abs解决方案在下面的弹性代码中被注释掉以获得完整性。请忽略resize-right上的行为 - 我们唯一关注的是resize-left上的文本重叠。

componentWillUnmount

Answer 1

解决方案是在左侧文本中添加width: 0;min-width: 0;以使左侧部分没有大小，因此文本将溢出。然后由于white-space:nowrap您未能看到任何视觉上的变化，但正确的文字将能够覆盖它。

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
}

.container--text {
  display: flex;
  flex-flow: row nowrap;
  padding: 10px 0;
  animation: change 2s infinite linear alternate;
}

.left {
  white-space: nowrap;
  width: 0;
  min-width: 0;
  color: #000000;
  font-weight: bold;
}

.right {
  white-space: nowrap;
  margin-left: auto;
  margin-right: 20px;
  background-color: #BCAAA4;
  color: #616161;
}

@keyframes change {
 from{width:500px;}
 to{width:230px;}
}

＆＃13;

<div class="container--text">
  <div class="left">Leeeeeeeeeeeft Text</div>
  <div class="right">Rigggggggggggggggght Text</div>
</div>

＆＃13;

或者您可以省略width:0并使用overflow:hidden在容器缩小时隐藏文字：

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
}

.container--text {
  display: flex;
  flex-flow: row nowrap;
  padding: 10px 0;
  animation: change 2s infinite linear alternate;
}

.left {
  white-space: nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width: 0;
  color: #000000;
  font-weight: bold;
}

.right {
  white-space: nowrap;
  margin-left: auto;
  margin-right: 20px;
  background-color: #BCAAA4;
  color: #616161;
}

@keyframes change {
  from { width: 500px;}
  to { width: 230px; }
}

＆＃13;

<div class="container--text">
  <div class="left">Leeeeeeeeeeeft Text</div>
  <div class="right">Rigggggggggggggggght Text</div>
</div>

＆＃13;

如何使一些文本与其他文本重叠而没有绝对位置

1 个答案: