如何通過其父容器的形狀切斷子元素的可見性？

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>