问下老师这个文字过大导致溢出div容器怎么解决？或者是别的地方有什么问题吗？

<!DOCTYPE html>
<html>
<head> 
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
</head>
<body>
<!--标题区-->
<div class="title">
<div class="tit_text">小蓝条用户数</div>
<div class="tit_refresh"></div>
</div>
<!--banner区-->
<div class="banner">
<div class="banner_user">用户数</div>
<div class="banner_user_num">1268</div>
<div class="banner_last">昨日增加数</div>
<div class="banner_last_num">58</div>
<div class="banner_today">今日增加数</div>
<div class="banner_today_num">10</div>
</div>
</body>
</html>

*{
	padding: 0;
	margin: 0;
}
body{
	font-family: '微软雅黑';
	min-width: 750px;
}
.clear:after{
	display: block;
    content:'';
    clear: both;
    height:0;
}
/*标题区*/
.title{
	width: 750px;
	height: 88px;
	background-color: #0078d7;
	margin: 0 auto;
	text-align: center;
	position: relative;
}
.title .tit_text{
	width: 229px;
	height: 37px;
	line-height: 37px;
	color: #fff;
	font-size: 38px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -18.5px;
	margin-left: -114.5px;
}
.title .tit_refresh{
	width: 44px;
	height: 44px;
	position: absolute;
	top: 50%;
	right: 24px;
	margin-top: -22px;
	background-image:url(../images/refresh.png);
}
/*banner区*/
.banner{
	width: 702px;
	height: 517px;
	margin: 22px auto 0 auto;
	border-radius: 22px;
	position: relative;
	background: -webkit-linear-gradient(left top,#0078d7,#53a9ec);
	background: -o-linear-gradient(left top,#0078d7,#53a9ec);
	background: -moz-linear-gradient(left top,#0078d7,#53a9ec);
	background: -mos-linear-gradient(left top,#0078d7,#53a9ec);
	background: linear-gradient(left top,#0078d7,#53a9ec);
}
.banner .banner_user{
	width: 146px;
	height: 47px;
	font-size: 48px;
	color: #fff;
	font-weight: bolder;
	position: absolute;
	top: 47px;
	left: 56px;
}
.banner .banner_user_num{
	width: 422px;
	height: 141px;
	font-size: 150px;
	color: #fff;
	font-weight: bolder;
	position: absolute;
	top: 116px;
	left: 219px;
	background-color: gray;
}
.banner .banner_last{
	width: 181px;
	height: 36px;
	font-size: 36px;
	color: #fff;
	font-weight: bolder;
	position: absolute;
	top: 316px;
	left: 52px;
}
.banner .banner_last_num{
	width: 114px;
	height: 78px;
	font-size: 100px;
	color: #fff;
	font-weight: bolder;
	position: absolute;
		background-color: gray;
	top: 390px;
	left: 84px;
}
.banner .banner_today{
	width: 183px;
	height: 36px;
	font-size: 36px;
	color: #fff;
	font-weight: bolder;
	position: absolute;
	top: 318px;
	left: 468px;
}
.banner .banner_today_num{
	width: 114px;
	height: 79px;
	font-size: 100px;
	color: #fff;
	font-weight: bolder;
	position: absolute;
	top: 389px;
	left: 508px;
}

就是灰色部分是容器，里面的文字出去了，哪里出现的问题

Liiiu 2018-09-28

源自：CSS定位（position） 2-8 position-absolute（实际工作用的最多，同时也相对比较难）

收起

2回答

好帮手慕夭夭 2018-09-28 17:47:10

同学是想要保持字体不变 , 实现不溢出的话 ,可以为文字设置行高 . 行高值与盛放它的容器高度一样大 , 使其在盒子中居中 ,如下 :

祝学习愉快 ,望采纳

收起回答

提问者 Liiiu #1

行高值我试过，但只能高度填充，宽度该怎么填充呢？简单来说就是把宽度拉伸成跟宽度一样

2018-09-28 17:57:02
好帮手慕夭夭回复提问者 Liiiu #2

同学如果给容器设置固定宽高是没有办法实现的 . 去掉容器的宽度和高度 . 让文字撑开容器的高度 ,可以达到所描述的效果 .

2018-09-28 18:02:35