css中的文本响应问题

Question

我有以下代码：

@import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.square {
  max-width: 460px;
  background: white;
  border-radius: 4px;
  box-shadow: 0px 5px 20px #D9DBDF;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.square:hover {
  -webkit-transform: translate(20px, -10px);
  -ms-transform: translate(10px, -10px);
  transform: translate(10px, -10px);
  -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.square .square-image img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border: 5px solid #555;
}

.square .square-details {
  padding: 20px 30px 30px;
}

.h11 {
  margin: auto;
  text-align: left;
  font-family: 'Merriweather', serif;
  font-size: 24px;
}

p0 {
  text-align: justify;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  color: #C8C8C8;
  line-height: 18px;
  margin-top: 10px;
  display: block;
}

.button56 {
  background-color: #0563bb;
  color: white;
  width: 100px;
  padding: 10px 18px;
  border-radius: 3px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 12px;
  margin-top: 18px;
  margin-bottom: 0;
  cursor: pointer;
  font-family: 'merriweather';
}

.button56:hover {
  opacity: 0.9;
  color: white;
}

.square1:hover {
  -webkit-transform: translate(20px, -10px);
  -ms-transform: translate(10px, -10px);
  transform: translate(10px, -10px);
  -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.square1 .square-image1 img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border: 5px solid #555;
}

.square1 .square-details1 {
  padding: 20px 30px 30px;
}

.square1 {
  max-width: 460px;
  background: white;
  border-radius: 4px;
  box-shadow: 0px 5px 20px #D9DBDF;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

@media screen and (max-width: 480px) {
  .square1 {
    margin-bottom: 0;
    margin-right: 0;
    margin-left: 0;
    margin-top: 54px;
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (max-width: 480px) {
  .square1 .square-image1 img {
    height: 230px !important;
    border: 5px solid #555;
    padding-left: 0;
    padding-right: 0;
  }
  .square .square-image img {
    height: 230px !important;
    border: 5px solid #555;
    padding-left: 0;
    padding-right: 0;
  }
  .square,
  .square1 {
    max-width: 460px;
    width: 100%;
  }
  .h11 {
    width: 100% !important;
  }
}

.containerE {
  --bs-gutter-x: 1.5rem;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) / 2);
  padding-left: calc(var(--bs-gutter-x) / 2);
  margin-right: auto;
  margin-left: auto;
}

@media screen and (max-width: 480px) {
  .containerE {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    justify-content: center;
    overflow: hidden;
  }
}

<section>
  <div class="section-title">
    <h2>Featured Blogs Of The Day</h2>
  </div>
  <div class="container" style="display: flex; justify-content: space-between;">
    <div class="containerE" style="display: flex; justify-content: space-between;">
      <div class="square">
        <div class="square-image">
          <img src="assets/img/Blog1.png">
        </div>

        <div class="square-details">
          <h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
          <p0>It is that time of the year again (yay!????) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
          <div><a href="https://m-hussainomer03.medium.com/chances-of-my-uni-college-admission-20bc0efec0af" target="_" class="button56">Read More</a></div>
        </div>

      </div>
      <div class="square1">
        <div class="square-image1">
          <img src="assets/img/Blog2.png">
        </div>

        <div class="square-details1">
          <h3 class="h11">My Career Advice To You: Take These Steps...</h3>
          <p0>Humans tend to make mistakes — and its completely normal as it results in the growth and development of an individual — either psychologically or physically.</p0>
          <div><a href="https://m-hussainomer03.medium.com/my-career-advice-to-you-take-these-steps-to-ultimate-prosperity-6c0687ce9c9f" target="_" class="button56">Read More</a></div>
        </div>

      </div>
    </div>
  </div>
</section>

当你运行上面的代码时，在一个新页面上打开它，检查它并在一个220宽的屏幕上查看它，然后你可以看到博客卡片外的文字溢出。

我想让.h11 和p0 文本适合博客卡片内部而不是流出它。我不想更改它们的字体大小，但是有没有办法可以将宽度设置为 100%，以便文本不会溢出博客卡之外？

出于某种原因，即使在 220 宽的屏幕上，第二个博客卡片文本也可以，但第一个博客文本不是。有什么建议可以让 .h11 和 p0 文本像第二个博客卡一样适合博客卡？

我什至尝试添加媒体查询并使用width: 100% 到.h11，但它不起作用。

Answer 1

没有必要这样做，因为 220px 不是人类的电话，也许是猫的电话。但你可以在你的 CSS 中简单地使用它。

* { word-break: break-all; }

* { word-break: break-all; }
@import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.square {
  max-width: 460px;
  background: white;
  border-radius: 4px;
  box-shadow: 0px 5px 20px #D9DBDF;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.square:hover {
  -webkit-transform: translate(20px, -10px);
  -ms-transform: translate(10px, -10px);
  transform: translate(10px, -10px);
  -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.square .square-image img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border: 5px solid #555;
}

.square .square-details {
  padding: 20px 30px 30px;
}

.h11 {
  margin: auto;
  text-align: left;
  font-family: 'Merriweather', serif;
  font-size: 24px;
}

p0 {
  text-align: justify;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  color: #C8C8C8;
  line-height: 18px;
  margin-top: 10px;
  display: block;
}

.button56 {
  background-color: #0563bb;
  color: white;
  width: 100px;
  padding: 10px 18px;
  border-radius: 3px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 12px;
  margin-top: 18px;
  margin-bottom: 0;
  cursor: pointer;
  font-family: 'merriweather';
}

.button56:hover {
  opacity: 0.9;
  color: white;
}

.square1:hover {
  -webkit-transform: translate(20px, -10px);
  -ms-transform: translate(10px, -10px);
  transform: translate(10px, -10px);
  -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.square1 .square-image1 img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border: 5px solid #555;
}

.square1 .square-details1 {
  padding: 20px 30px 30px;
}

.square1 {
  max-width: 460px;
  background: white;
  border-radius: 4px;
  box-shadow: 0px 5px 20px #D9DBDF;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

@media screen and (max-width: 480px) {
  .square1 {
    margin-bottom: 0;
    margin-right: 0;
    margin-left: 0;
    margin-top: 54px;
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (max-width: 480px) {
  .square1 .square-image1 img {
    height: 230px !important;
    border: 5px solid #555;
    padding-left: 0;
    padding-right: 0;
  }
  .square .square-image img {
    height: 230px !important;
    border: 5px solid #555;
    padding-left: 0;
    padding-right: 0;
  }
  .square,
  .square1 {
    max-width: 460px;
    width: 100%;
  }
  .h11 {
    width: 100% !important;
  }
}

.containerE {
  --bs-gutter-x: 1.5rem;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) / 2);
  padding-left: calc(var(--bs-gutter-x) / 2);
  margin-right: auto;
  margin-left: auto;
}

@media screen and (max-width: 480px) {
  .containerE {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    justify-content: center;
    overflow: hidden;
  }
}

<section>
  <div class="section-title">
    <h2>Featured Blogs Of The Day</h2>
  </div>
  <div class="container" style="display: flex; justify-content: space-between;">
    <div class="containerE" style="display: flex; justify-content: space-between;">
      <div class="square">
        <div class="square-image">
          <img src="assets/img/Blog1.png">
        </div>

        <div class="square-details">
          <h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
          <p0>It is that time of the year again (yay!?) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
          <div><a href="https://m-hussainomer03.medium.com/chances-of-my-uni-college-admission-20bc0efec0af" target="_" class="button56">Read More</a></div>
        </div>

      </div>
      <div class="square1">
        <div class="square-image1">
          <img src="assets/img/Blog2.png">
        </div>

        <div class="square-details1">
          <h3 class="h11">My Career Advice To You: Take These Steps...</h3>
          <p0>Humans tend to make mistakes — and its completely normal as it results in the growth and development of an individual — either psychologically or physically.</p0>
          <div><a href="https://m-hussainomer03.medium.com/my-career-advice-to-you-take-these-steps-to-ultimate-prosperity-6c0687ce9c9f" target="_" class="button56">Read More</a></div>
        </div>

      </div>
    </div>
  </div>
</section>