Javascript 如何防止div文本溢出容器

我有一个div中包含的文本。我在其中添加了一个20px的左边填充，我想这就是文本从div中溢出到右边的原因，但是否有任何方法可以防止这种情况？这是代码

.trainer包装器{
位置：相对位置；
宽度：100%；
高度：700px；
背景色：#F6F6F6；
}
.顶级教练{
位置：相对位置；
排名：0；
左：0；
宽度：100%；
高度：90px；
}
#底层培训师{
位置：相对位置；
宽度：100%；
高度：100px；
颜色：黑色；
字体系列：“Roboto”，无衬线；
字体大小：16px；
溢出：隐藏；
左侧填充：20px；
单词包装：打断单词；
}
#团队{
左侧填充：20px；
填充顶部：20px；
字体大小：42px；
字体系列：“Roboto”，无衬线；
字号：500；
颜色：黑色；
}
跨度{
边框底部：1px纯黑；
}

团队
在Vizion Fitness，我们汇集了国内最优秀的教练，帮助客户实现他们的梦想身材。我们的培训师都是经过NSCA认证的，并且在他们所做的事情上已经成为最优秀的培训师之一。无论是无神论者还是想要提高自己的有献身精神的个人，我们都有团队帮助您实现目标。我们的每一位教练都专门为希望提高技能的运动员提供一项特定的运动，但他们都是任何个人的教练。快来看看DFW都市计划中最好的团队！

只需将

宽度：100%

从

#底部训练器中移除即可：


.trainer包装器{
位置：相对位置；
宽度：100%；
高度：700px；
背景色：#F6F6F6；
}
.顶级教练{
位置：相对位置；
排名：0；
左：0；
宽度：100%；
高度：90px；
}
#底层培训师{
位置：相对位置；
高度：100px；
颜色：黑色；
字体系列：“Roboto”，无衬线；
字体大小：16px；
溢出：隐藏；
左侧填充：20px；
单词包装：打断单词；
}
#团队{
左侧填充：20px；
填充顶部：20px；
字体大小：42px；
字体系列：“Roboto”，无衬线；
字号：500；
颜色：黑色；
}
跨度{
边框底部：1px纯黑；
}

团队
在Vizion Fitness，我们汇集了国内最优秀的教练，帮助客户实现他们的梦想身材。我们的培训师都是经过NSCA认证的，并且在他们所做的事情上已经成为最优秀的培训师之一。无论是无神论者还是想要提高自己的有献身精神的个人，我们都有团队帮助您实现目标。我们的每一位教练都专门为希望提高技能的运动员提供一项特定的运动，但他们都是任何个人的教练。快来看看DFW都市计划中最好的团队！
div元素默认为块元素，这意味着宽度为父级自由宽度的100%。不需要底部的宽度，这就是为什么你的文本不存在的问题。我知道我的评论不会有多大帮助，但我只想说，与其在包装内的每件东西都加上填充，通常最好是给包装本身加上填充，然后让其他东西加上0（左和右）填充和100%宽度，只需从内部控制垂直填充/边距，这样做更有意义