如何使一些文本在没有绝对位置的情况下与其他文本重叠

Question

我在 100% 宽度的弹性行中有两个文本字段。一个位于左侧，另一个位于右侧。当容器 (window) 从右侧调整大小（变小）时，我希望右侧的文本 overlap/cover 左侧的文本。

解决方案不得使用绝对定位。左侧文本有一个左边距，右侧文本必须在该处停止。文本容器故意是一行 100% 宽度。

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

为了完整起见，下面的 flex 代码中注释掉了 position:abs 解决方案。请忽略 resize-right 的行为——我们唯一关注的是 resize-left 上的文本重叠。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container">
  <div class="container--text">
    <div class="left">Left Text</div>
    <!-- <div class="container--right"> -->
       <div class="right">Right Text</div>
    <!-- </div> -->
  </div>
</div>
</body>
</html>



   html, body {
    height: 100vh;
    width:100%;
    background-color: #D7CCC8;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.container {
    min-width:100%;
    width:100%;
    margin-left:20px;
    height: 14px;
    max-height:14px;
}

.container--text {
    height: 14px;
    max-height:14px;
    width:100%;
    display: flex;
    flex-flow: row nowrap;
    padding: 10px 0;
}

.left {
    white-space: nowrap;
    color: #000000;
    font-size: 14px;
    font-weight: bold;
    text-overflow: ellipsis;
    flex-shrink:1;
}

/* This is not a viable soln because there is no boundary left for the pos:absolute element without JS*/
.container--right {
  /*height: 14px;
  background-color: #D7CCC8;
  position:absolute;
  right:0;
  */
}
.right {
    white-space: nowrap;
    justify-self:flex-end;
    margin-left:auto;
    margin-right:20px;
    background-color:#BCAAA4;
    color: #616161;
    font-size: 12px;
}

Answer 1

一种解决方法是在左边的文本中加上width: 0;min-width: 0;，使左边的部分没有大小，这样文本就会溢出。然后由于 white-space:nowrap 你不会看到任何视觉变化，但正确的文本将能够覆盖它。

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

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

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

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

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

如何使一些文本在没有绝对位置的情况下与其他文本重叠

How to make some text overlap other text without position absolute

html

css

css-position

flexbox