我想在網頁上添加一些文本，這些文本將顯示在容器的右邊緣。
我能想到的唯一方法是將文本的顏色偽裝成外部容器的背景顏色。但是這種實作是非常冒險的，因為外部背景可以是不同的顏色，甚至是上面的影像。
如何在 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>uj5u.com熱心網友回復：
如果要隱藏其余文本，可以使用溢位：隱藏；。
.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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/508210.html
下一篇：Hibernate不保存物體