CSS：溢出y和填充調整

嗨我想填充一些文本溢出和填充，但底部填充不起作用像頂部，左側和右側邊界的其餘部分。CSS：溢出y和填充調整

我嘗試添加文本溢出，但這不起作用。 :(

我想看到的「測試」一詞被部分隱藏，並沒有觸及黑色邊框。

body, html { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t display: flex; 
 
\t justify-content: center; 
 
\t align-items: center; 
 
\t height:100%; 
 
\t width: 100%; 
 
} 
 
.css { 
 
\t width: 220px; 
 
\t height: 220px; 
 
\t border: solid 6px black; 
 
\t font-size: 45pt; 
 
\t padding: 10px 17px; 
 
\t font-family: arial, sans-serif; 
 
\t font-weight: 600; 
 
\t line-height: 90%; 
 
\t box-sizing: border-box; 
 
\t background-color:red; 
 
\t overflow:hidden; 
 
\t text-overflow:''; 
 
}

<div class="css">CSS IS AWESOME TEST</div>

https://codepen.io/StoptThisRetard/pen/eRrrJg

來源

2017-07-04 Kima

安置自己嘗試代碼。 – LKG

調整css高度或使用overflow-y：scroll – Momin

的問題是，overflow:hidden隱藏以外的內容框，而padding是裏面的的方塊。

那麼你得到的結果是否正確。

爲了解決您的問題，您可以添加另一個div並給出div填充和背景。請參見下面的代碼片段

body, 
 
html { 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.css { 
 
    width: 220px; 
 
    height: 220px; 
 
    font-size: 45pt; 
 
    padding: 10px 17px; 
 
    font-family: arial, sans-serif; 
 
    font-weight: 600; 
 
    line-height: 90%; 
 
    
 
    overflow: hidden; 
 
} 
 

 
.css_wrapper { 
 
    padding: 10px 17px; 
 
    border: solid 6px black; 
 
    background-color: red; 
 
box-sizing: border-box; 
 
    
 
}

<div class="css_wrapper"> 
 
    <div class="css">CSS IS AWESOME TEST</div> 
 
</div>

來源

2017-07-04 06:39:36

CSS：溢出y和填充調整

回答

相關問題