CSS：overflow-y和padding调整

Question

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

我尝试添加文本溢出但这没有用。 ：（

我想看到＆＃34; TEST＆＃34;被部分隐藏，而不是触及黑色边框。

＆＃13;

＆＃13;

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:'';
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

问题在于overflow:hidden隐藏了在外面框中的内容，而padding在内部框中。

那么你得到的结果是正确的。

要解决您的问题，您可以添加另一个div并给出div填充和背景。请参阅下面的代码段

＆＃13;

＆＃13;

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;
 
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;