如何防止div文本溢出容器
[英]how to prevent div text from overflowing container
问题描述
我有我在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>
1 个解决方案
解决方案1
3 已采纳 2016-12-03 20:34:50
只需删除width: 100% #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。
当父可调整大小时，如何防止嵌套DIV的内容溢出父级？
[英]How to prevent contents of nested DIV from overflowing parent when parent is resizable?
如何防止我的英雄区域中的文本为移动用户溢出？
[英]How do I prevent the text from my hero area from overflowing for mobile users?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.