我一直在尝试将<p>
放入我的<div>
中,但是它一直在脱落。我希望每当<p>
内的文本变成更多文本时,div的高度都变大。
#service-wrapper {
width: 100%;
height: auto;
margin-top: 20%;
margin-left: auto;
margin-right: auto;
text-align: center;
padding-top: 8px;
max-width: 90%;
}
.service-title {
width: 100%;
height: 70px;
color: #fff;
font-family: 'Montserrat', sans-serif;
font-size: 25px;
font-weight: 600;
margin-top: 0;
}
.service-wrapper2 {
width: auto;
height: auto;
display: inline-flex;
max-width: 100%;
}
.service-container {
width: 300px;
height: auto;
border: 4px solid rgb(94, 106, 124);
margin: 10px 40px;
}
.container-title {
width: auto;
height: 30%;
color: #fff;
font-family: 'Montserrat', sans-serif;
font-size: 20px;
padding-top: 8px;
border: solid 1px #fff;
background-image: url("images/drawing.jpg");
background-size: 100% 100%;
}
.service-container p {
color: rgb(247, 250, 255);
max-height: 100%;
}
<div class="service-wrapper2">
<div class="service-container">
<div class="container-title">service1</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
</div>
我有多个彼此相邻的service.container,但是我认为这种情况无关紧要。
答案 0 :(得分:4)
这就是您要寻找的。我也对您的CSS进行了小幅修改,以解决此问题(例如:从height
中删除了container-title
)。
word-wrap: break-word;
word-wrap属性使长单词能够被折断并包装到下一行。
.service-wrapper2 {
width: auto;
display: inline-flex;
max-width: 100%;
}
.service-container {
padding: 20px;
width: 300px;
border: 4px solid rgb(94, 106, 124);
margin: 10px 40px;
word-wrap: break-word;
}
.container-title {
width: auto;
color: #000;
font-family: 'Montserrat', sans-serif;
font-size: 20px;
padding-top: 8px;
border: solid 1px #fff;
background-image: url("images/drawing.jpg");
background-size: 100% 100%;
}
.service-container p {
color: #000;
}
<div class="service-wrapper2">
<div class="service-container">
<div class="container-title">service1</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssaaaaaaaaaaaaaaaaaaaaaaaaasssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssaaaaaaaaaaaaaaaaaaaaaaaaawwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssaaaaaaaaaaaaaaaaaaaaaaaaasssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
</div>
</div>