Hide text behind overflowed text

Question

I want to know how to hide text that is overflowed by some other text.

Check out this example:

.container {
  display: flex;
}

.left {
  background-color: red;
  width: 50px;
  overflow: visible;
  /* should be position relative but I'm 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>

As you can see, the left div's text overflows into the right div's text. How can I make the left text overlap the right text so the right text that is overlapped doesn't show up at all using CSS? I need to keep the current html structure with the overflowed text.

I usually would use background color on the left text but in this particular case I can't have a background color because its extended out of its parent div.

Answer 1

You can consider a pseudo element where you will use the background color of the right div in order to hide the text. Then adjust z-index of the elements to have the desired effect:

.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>