Home How do I cut off the child element visibility by its parent container's shape?

Questions

How do I cut off the child element visibility by its parent container's shape?

September 14, 2022

I want to add some text on a webpage, which will show up on the right edge of a container.

The only way I can think of is to fake the color of the text as the background color of the outsider container. But this implementation is quite risky as the outside background can be of different colors or even images on it.

How do I cut off the part that is outside of the parent container in CSS?

.container {
  margin: 2em;
  position: relative;
  width: 400px;
  height: 200px;
  background: #f1f1f1
}

.ads {
  position: absolute;
  right: 0;
  width: 5px;
  text-align: center;
  top: 50%;
  background: black;
  /* color: white; */
  transform: translateY(-50%);
  transition: 1s
}

.ads b {
  pointer-events: none;
  width: 100px;
  display: block
}

.ads:hover {
  width: 100px;
}

.high-level-container {
  margin: 2em;
  width: 500px;
  height: 600px;
  background: yellow;
}

<h3> The hack works </h3>

<div class="container">
  <div class="ads">
    <b>Some Ads</b>
  </div>
</div>

<h3> The hack fails </h3>

<div class="high-level-container">
  <div class="container">
    <div class="ads">
      <b>Some Ads</b>
    </div>
  </div>
</div>

>Solution :

If you want hide the rest text, you can use overflow:hidden;.

.container{overflow:hidden;}

But if you need wordbreak, use :

b{word-break: break-all;}

.container {
  margin: 2em;
  position: relative;
  width: 400px;
  height: 200px;
  background: #f1f1f1
}

.ads {
  position: absolute;
  right: 0;
  width: 5px;
  text-align: center;
  top: 50%;
  background: black;
  /* color: white; */
  transform: translateY(-50%);
  transition: 1s;
  overflow:hidden; <-- This one
}

.ads b {
  pointer-events: none;
  width: 100px;
  display: block
}

.ads:hover {
  width: 100px;
}

.high-level-container {
  margin: 2em;
  width: 500px;
  height: 600px;
  background: yellow;
}

<h3> The hack works </h3>

<div class="container">
  <div class="ads">
    <b>Some Ads</b>
  </div>
</div>

<h3> The hack fails </h3>

<div class="high-level-container">
  <div class="container">
    <div class="ads">
      <b>Some Ads</b>
    </div>
  </div>
</div>