我有包含在 div 中的文本。我向其添加了 20px 的左侧填充，我认为这就是为什么文本从 div 右侧溢出的原因，但是有什么办法可以防止这种情况发生吗？这是代码。
.trainer-wrapper{
position: relative;
width: 100%;
height: 700px;
background-color: #F6F6F6;
}
.top-trainer{
position: relative;
top: 0;
left: 0;
width: 100%;
height: 90px;
}
#bottom-trainer{
position: relative;
width: 100%;
height: 100px;
color: black;
font-family: 'Roboto', sans-serif;
font-size: 16px;
overflow: hidden;
padding-left: 20px;
word-wrap: break-word;
}
#the-team{
padding-left: 20px;
padding-top: 20px;
font-size: 42px;
font-family: 'Roboto', sans-serif;
font-weight: 500;
color: black;
}
span{
border-bottom: 1px solid black;
}<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "main.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
</head>
<body>
<div class = "trainer-wrapper">
<div class = "top-trainer">
<h2 id = "the-team"><span>The Team</span></h2>
</div>
<div id = "bottom-trainer">At Vizion Fitness we have assembled the greatest trainers in the country to help our customers achieve their dream body. Our trainers are all NSCA certified and have established themselves as being one of the best at what they do. Whether it be atheltes or commited individuals wanting to improve themselves, we have the team to help you achieve your goals. Each of our trainers specializes in a specific sport for athletes wanting to improve their skills however they are all trainers for any individual. Come check out the best team in DFW metroplex!</div>
</div>
</body>
</html>最佳答案
只需从#bottom-trainer中删除width: 100%:
.trainer-wrapper{
position: relative;
width: 100%;
height: 700px;
background-color: #F6F6F6;
}
.top-trainer{
position: relative;
top: 0;
left: 0;
width: 100%;
height: 90px;
}
#bottom-trainer{
position: relative;
height: 100px;
color: black;
font-family: 'Roboto', sans-serif;
font-size: 16px;
overflow: hidden;
padding-left: 20px;
word-wrap: break-word;
}
#the-team{
padding-left: 20px;
padding-top: 20px;
font-size: 42px;
font-family: 'Roboto', sans-serif;
font-weight: 500;
color: black;
}
span{
border-bottom: 1px solid black;
}<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "main.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
</head>
<body>
<div class = "trainer-wrapper">
<div class = "top-trainer">
<h2 id = "the-team"><span>The Team</span></h2>
</div>
<div id = "bottom-trainer">At Vizion Fitness we have assembled the greatest trainers in the country to help our customers achieve their dream body. Our trainers are all NSCA certified and have established themselves as being one of the best at what they do. Whether it be atheltes or commited individuals wanting to improve themselves, we have the team to help you achieve your goals. Each of our trainers specializes in a specific sport for athletes wanting to improve their skills however they are all trainers for any individual. Come check out the best team in DFW metroplex!</div>
</div>
</body>
</html>通过将该 div 的宽度设置为 100%，它实际上获得了其父级的宽度。问题是您的 padding-left 也为 20px，它会将该元素向右移动 20px。
关于javascript - 如何防止div文本溢出容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40952174/