如何防止div文本溢出容器

我有包含在div中的文本。我添加了一個20px左邊的填充，我認爲這就是爲什麼文本溢出了右邊的div，但無論如何爲防止這種情況呢？這是代碼。如何防止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>

來源

2016-12-03 Web-Student214

div元素是默認的塊元素，這意味着寬度是父免費寬度的100％。不需要底部教練的寬度，這就是爲什麼你的文字不存在的問題。 – 2016-12-03 20:34:58

我知道我的評論不會有太大的幫助，但我只是說，不是把填充放在包裝中的每一個東西上，而是給包裝本身填充填充，然後讓其他所有填充爲0 （左和右）填充和100％的寬度，只是從裏面的東西控制垂直填充/邊距，這只是更有意義這種方式 – ajax333221

剛從#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。

來源

2016-12-03 20:34:50 Dekel

確定即時獲得它知道感謝信息和答案 –

當然:)不客氣。 – Dekel

如何防止div文本溢出容器

回答

相關問題