【发布时间】：2021-09-23 20:50:39
【问题描述】：
我有以下代码：
@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，但它不起作用。
似乎当我将屏幕宽度大小设置为 150 像素时，即使是第二个博客的文本也会流出卡片。有没有办法解决这个问题？
【问题讨论】：
标签： javascript html jquery css sass