填充以在包装中包含文本

Question

我希望文本在卡片内容容器周围有30px的填充，但目前字幕文本溢出。

.card {
background-color: transparent;
margin: 0;
border: 1px solid rgb(180, 191, 200);
border-top: none;
}
.card-img-left {
height: 40%;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-image: url('./../img/card-left.png');
}
.card-content {
height: 60%;
width: 100%;
}
.card-text {
height: calc(100% / 3 * 2);
width: 100%;
padding: 1.5rem 2.5rem 2.5rem;
text-align: left;
}
.card-title {
font-size: 2rem;
color: rgb(3, 16, 34);
font-family: nbold;
}
.card-subtitle {
margin-top: 1em;
font-size: 15px;
color: rgb(59, 66, 77);
}
.card-btn {
height: calc(100% / 3);
width: 100%;
}

<div class="card">
<div class="card-img-left"></div>
<div class="card-content">
<div class="card-text">
<div class="card-title">Free valuation</div>
<div class="card-subtitle">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, labore voluptas. Ipsa nulla laboriosam labore! Aspernatur numquam in impedit quod ea obcaecati dolorum incidunt! Facere optio officia veniam, quas voluptatum aperiam eligendi aut maiores
ipsa explicabo. Repellat, praesentium! Quia sint reprehenderit quibusdam alias temporibus nihil ipsum beatae deleniti facilis harum.</div>
</div>
<div class="card-btn"></div>
</div>
</div>

它看起来像这样：

[！[屏幕截图][1]][1]

我该如何解决这个问题？[1] ：https://i.stack.imgur.com/R440Y.png

Answer 1

将box-sizing: border-box;添加到您的.card-text样式中。

.card {
background-color: transparent;
margin: 0;
border: 1px solid rgb(180, 191, 200);
border-top: none;
}
.card-img-left {
height: 40%;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-image: url('./../img/card-left.png');
}
.card-content {
height: 60%;
width: 100%;
}
.card-text {
height: calc(100% / 3 * 2);
width: 100%;
padding: 1.5rem 2.5rem 2.5rem;
text-align: left;
box-sizing: border-box;
}
.card-title {
font-size: 2rem;
color: rgb(3, 16, 34);
font-family: nbold;
}
.card-subtitle {
margin-top: 1em;
font-size: 15px;
color: rgb(59, 66, 77);
}
.card-btn {
height: calc(100% / 3);
width: 100%;
}

<div class="card">
<div class="card-img-left"></div>
<div class="card-content">
<div class="card-text">
<div class="card-title">Free valuation</div>
<div class="card-subtitle">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, labore voluptas. Ipsa nulla laboriosam labore! Aspernatur numquam in impedit quod ea obcaecati dolorum incidunt! Facere optio officia veniam, quas voluptatum aperiam eligendi aut maiores
ipsa explicabo. Repellat, praesentium! Quia sint reprehenderit quibusdam alias temporibus nihil ipsum beatae deleniti facilis harum.</div>
</div>
<div class="card-btn"></div>
</div>
</div>

Answer 2

尝试在文本容器上使用此CSS：

word-wrap: break-word;

Answer 3

你只需要在字幕上加一个宽度：

.card {
background-color: transparent;
margin: 0;
border: 1px solid rgb(180, 191, 200);
border-top: none;
}
.card-img-left {
height: 40%;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-image: url('./../img/card-left.png');
}
.card-content {
height: 60%;
width: 100%;
}
.card-text {
height: calc(100% / 3 * 2);
width: 100%;
padding: 1.5rem 2.5rem 2.5rem;
text-align: left;
}
.card-title {
font-size: 2rem;
color: rgb(3, 16, 34);
font-family: nbold;
}
.card-subtitle {
margin-top: 1em;
font-size: 15px;
color: rgb(59, 66, 77);
width: calc(100% - 5rem);
}
.card-btn {
height: calc(100% / 3);
width: 100%;
}

<div class="card">
<div class="card-img-left"></div>
<div class="card-content">
<div class="card-text">
<div class="card-title">Free valuation</div>
<div class="card-subtitle">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, labore voluptas. Ipsa nulla laboriosam labore! Aspernatur numquam in impedit quod ea obcaecati dolorum incidunt! Facere optio officia veniam, quas voluptatum aperiam eligendi aut maiores
ipsa explicabo. Repellat, praesentium! Quia sint reprehenderit quibusdam alias temporibus nihil ipsum beatae deleniti facilis harum.</div>
</div>
<div class="card-btn"></div>
</div>
</div>

Answer 4

您遇到的问题是由盒子大小引起的

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

你能做的是把你的主要风格文件

* {
box-sizing: border-box;
}

默认情况下，如果将宽度(或高度(设置为100%，则不会占用边距和填充。

使用box-sizing : border-box，您可以确保您的容器始终是您想要的大小，即使您放置了边距或填充。