填充以在包装器中包含文本

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

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

word-wrap: break-word;

Answer 2

将 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 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，您可以确保您的容器始终是您想要的大小，即使您放置边距或填充也是如此。

填充以在包装器中包含文本

Padding to contain text in a wrapper

html

css

padding