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

【问题标题】：How to make some text overlap other text without position absolute如何使某些文本与其他文本重叠而没有绝对位置
【发布时间】：2018-11-06 10:40:39
【问题描述】：

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

解决方案不得使用绝对定位。左边的文本有一个左边距，右边的文本必须停止。文本容器故意设置为 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;
}

【问题讨论】：

??这是你尝试做的吗jsfiddle.net/Lcjcyp4g/4 .
是否希望右侧的文本在缩放时超出顶部？还是左边的文字消失？

标签： html css flexbox css-position

【解决方案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>

【讨论】：

优秀。一旦我向正确的文本添加了更高的 z-index，您的解决方案就是准确的。如果您不介意，请解释您的推理:)
@user2355058 它依赖于溢出 ;) 使宽度：0 文本溢出左侧部分并且左侧部分没有大小，因此不占用空间，因此左侧可以位于溢出文本上方跨度>
@user2355058 我添加了更多解释，希望更清楚;)
很好的帮助！
小提琴已使用已接受答案中的代码进行了更新——我们如何让text-overflow: ellipsis 处理左侧文本？