如何避免在'溢出隱藏'的邊緣觸摸文本div

Question

我已經應用了一個元素的動態高度，該元素是overflow: hidden div的一部分。問題是，雖然我已經將overflow: hidden和padding-bottom: 20px;應用於元素，但元素的文本觸及其父元素的邊緣。如何避免這種情況？

.box { 
 
    width: 300px; 
 
    height: 190px; 
 
    border: 1px solid #999; 
 
    overflow: hidden; 
 
} 
 
.box p { 
 
    padding: 10px 10px 20px; 
 
    margin: 0; 
 
} 
 
.des { 
 
    overflow: hidden; 
 
}

<div class="box"> 
 
    <p class="title">Title of post Title of post Title of post Title of post Title of post Title of post Title of post Title of post</p> 
 
    <div class="des"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed ipsum a lacus 
 
     sodales eleifend. Vestibulum lorem felis, rhoncus elementum vestibulum eget, dictum ut velit. Nullam venenatis, elit in suscipit imperdiet, orci purus posuere mauris, quis adipiscing ipsum urna ac quam.</p> 
 
    </div> 
 
</div>

Answer 1

你可以把另一個DIV（假設.box-inner）在.box元素，將隱藏其背後的文本的底部。

只要給.box一個位置：相對並給位置絕對的.box-inner股利。

注：給這個.box-inner背景色相同的文字的背景

.box { 
 
    width: 300px; 
 
    height: 190px; 
 
    border: 1px solid #999; 
 
    overflow: hidden; 
 
    /* Add relative position */ 
 
    position:relative; 
 
} 
 
.box p { 
 
    padding: 10px 10px 20px; 
 
    margin: 0; 
 
} 
 
.des { 
 
    overflow: hidden; 
 
} 
 

 
/* Newly added element */ 
 
.box-inner { 
 
    position:absolute; 
 
    bottom:0; 
 
    left:0; 
 
    right:0; 
 
    height:10px; 
 
    background-color:#fff; 
 
}

<div class="box"> 
 
    <p class="title">Title of post Title of post Title of post Title of post Title of post Title of post Title of post Title of post</p> 
 
    <div class="des"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed ipsum a lacus 
 
     sodales eleifend. Vestibulum lorem felis, rhoncus elementum vestibulum eget, dictum ut velit. Nullam venenatis, elit in suscipit imperdiet, orci purus posuere mauris, quis adipiscing ipsum urna ac quam.</p> 
 
    </div> 
 
<div class="box-inner"></div> 
 
</div>

---

SOLUTION＃2（內盒盒）

添加.box-inner作爲.box的子元素，並將其中的所有內容。不要給任何邊界。

.box { 
 
    width: 300px; 
 
    height: 190px; 
 
    border: 1px solid #999; 
 
    overflow: hidden; 
 
    /* Add relative position */ 
 
    position:relative; 
 
} 
 
.box p { 
 
    padding: 0 0 10px; 
 
    margin: 0; 
 
} 
 
.des { 
 
    overflow: hidden; 
 
} 
 

 
.box-inner { 
 
    position:absolute; 
 
    top:10px; 
 
    left:10px; 
 
    right:10px; 
 
    bottom:10px; 
 
    overflow:hidden; 
 
}

<div class="box"> 
 
    <div class="box-inner"> 
 
    <p class="title">Title of post Title of post Title of post Title of post Title of post Title of post Title of post Title of post</p> 
 
    <div class="des"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed ipsum a lacus 
 
     sodales eleifend. Vestibulum lorem felis, rhoncus elementum vestibulum eget, dictum ut velit. Nullam venenatis, elit in suscipit imperdiet, orci purus posuere mauris, quis adipiscing ipsum urna ac quam.</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

據我一個更好的方式來實現這一目標是使用:after僞選擇。這將顯示一個帶有給定隱藏的框的末端的白色條。因此隱藏了觸摸底部邊界的底部線條並給出了填充的外觀。

下面是代碼：

.box { 
 
    width: 300px; 
 
    height: 190px; 
 
    position: relative; 
 
    border: 1px solid #999; 
 
    overflow: hidden; 
 
} 
 
.box p { 
 
    padding: 10px 10px 20px; 
 
    margin: 0; 
 
} 
 
.des { 
 
    padding: 10px 10px 0; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.box:after{ 
 
    content: ' '; 
 
    display: block; 
 
    background-color: white; 
 
    height: 10px; 
 
    width: 100%; 
 
    position: absolute; 
 
    bottom: 0; 
 
}

<div class="box"> 
 
    <p class="title">Title of post Title of post Title of post Title of post Title of post Title of post Title of post Title of post</p> 
 
    <div class="des"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed ipsum a lacus 
 
     sodales eleifend. Vestibulum lorem felis, rhoncus elementum vestibulum eget, dictum ut velit. Nullam venenatis, elit in suscipit imperdiet, orci purus posuere mauris, quis adipiscing ipsum urna ac quam.</p> 
 
    </div> 
 
</div>