填充以包含包装器中的文本[重复]

Question

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

.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

您遇到的问题是由 box-sizing 引起的

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

你可以做的就是把你的主样式文件放进去

* {
box-sizing: border-box;
}

默认情况下，如果您将宽度（或高度）设置为 100%，则不会占用边距和内边距。

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