CSS:溢出-y 和填充调整

Question

嗨，我正在尝试用溢出和填充填充填充一些文本，但底部填充不像顶部、左侧和右侧边框的其余部分那样工作。

我尝试添加文本溢出，但这不起作用。 :(

我希望看到"TEST"一词被部分隐藏，并且不触及黑色边框。

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

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

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

Answer 1

问题是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>