html - overflow hidden 文本后面的文本

Question

我想知道如何隐藏被其他文本溢出的文本。

看看这个例子:

.container {
  display: flex;
}

.left {
  background-color: red;
  width: 50px;
  overflow: visible;
  /* should be position relative but im omitting it just for this example */
}

.left p {
  position: absolute;
  left: 15px;
}

.right {
  background-color: tan
}

<div class="container">
  <div class="left">
    <p>text text text</p>
  </div>
  <div class="right">
    <p>123456</p>
  </div>
</div>

如您所见，左侧 div 的文本溢出到右侧 div 的文本中。如何使左侧文本与右侧文本重叠，以便使用 CSS 完全不显示重叠的右侧文本？我需要保留当前的 ​​html 结构和溢出的文本。

我通常会在左侧文本上使用背景色，但在这种特殊情况下我不能使用背景色，因为它超出了其父 div。

Answer 1

您可以考虑一个伪元素，您将在其中使用右侧 div 的背景色来隐藏文本。然后调整元素的 z-index 以达到预期的效果:

.container {
  display: flex;
  z-index:0;
  margin:5px;
}

.left {
  background-color: red;
  width: 50px;
  overflow: visible;
  /* should be position relative but im omitting it just for this example */
}

.left p {
  position: absolute;
  left: 15px;
}

.left p:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:tan;
}

.right {
  background-color: tan;
  z-index:-2;
}

<div class="container">
  <div class="left">
    <p>text text text</p>
  </div>
  <div class="right">
    <p>123456</p>
  </div>
</div>

<div class="container">
  <div class="left">
    <p>text </p>
  </div>
  <div class="right">
    <p>123456</p>
  </div>
</div>
<div class="container">
  <div class="left">
    <p>text text aa </p>
  </div>
  <div class="right">
    <p>123456</p>
  </div>
</div>