如何通过其父容器的形状切断子元素的可见性？

Question

我想在网页上添加一些文本，这些文本将显示在容器的右边缘。

我能想到的唯一方法是将文本的颜色伪装成外部容器的背景颜色。 但是这种实现是相当冒险的，因为外部背景可以是不同的 colors 甚至是上面的图像。

如何切断 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>

Answer 1

如果要隐藏 rest 文本，可以使用 overflow:hidden;。

.container{overflow:hidden;}

但是，如果您需要分词，请使用：

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>