Text Causing An Overflow

text still causing an overflow even when I've added '

overflow: hidden;

overflow: hidden;

I notice that when I use

.mn-pro-ctn{max-width: 100%; flex-wrap: wrap;}

.mn-pro-ctn{max-width: 100%; flex-wrap: wrap;}

for small screens, the text doesn't overflow. the problem is that, I don't want to wrap the cards, I want to display them in an horizontal line then use

scroll

scroll

to view the rest if it overflows the viewport.

echo '<div class="mn-pro-ctn" id="proContainer">';
foreach($products as $product){
echo '<div class="product-crd">';
echo '<h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h5>';
echo '</div>';
 }

echo '</div>'; // mn-pro-ctn closing div

echo '<div class="mn-pro-ctn" id="proContainer">';
foreach($products as $product){
echo '<div class="product-crd">';
echo '<h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h5>';
echo '</div>';
 }

echo '</div>'; // mn-pro-ctn closing div

css

.mn-pro-ctn{
    width: 90%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    background: palegoldenrod;
}


.product-crd{
    width: 15%;
    margin-block-end: .5rem;
    margin-inline-end: .5rem;
    background: paleturquoise;
}

 
.product-crd h5{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}


@media (max-width: 900px){
    .mn-pro-ctn{max-width: 100%; }
    
   .product-crd h5{font-size: .8rem;}
}

@media (max-width: 500px){
    .product-crd{min-width: 40%;}

}

.mn-pro-ctn{
    width: 90%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    background: palegoldenrod;
}


.product-crd{
    width: 15%;
    margin-block-end: .5rem;
    margin-inline-end: .5rem;
    background: paleturquoise;
}

 
.product-crd h5{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}


@media (max-width: 900px){
    .mn-pro-ctn{max-width: 100%; }
    
   .product-crd h5{font-size: .8rem;}
}

@media (max-width: 500px){
    .product-crd{min-width: 40%;}

}

I'm applying

.product-crd{min-width: 40%;}

.product-crd{min-width: 40%;}

to small screens cos the width doesn't grow when I use

.product-crd{width: 40%;}

.product-crd{width: 40%;}

KP-C

Kevin Powell - Community•3y ago

Bless😇

Text Causing An Overflow

text still causing an overflow even when I've added '

overflow: hidden;

overflow: hidden;

I notice that when I use

.mn-pro-ctn{max-width: 100%; flex-wrap: wrap;}

.mn-pro-ctn{max-width: 100%; flex-wrap: wrap;}

for small screens, the text doesn't overflow. the problem is that, I don't want to wrap the cards, I want to display them in an horizontal line then use

scroll

scroll

to view the rest if it overflows the viewport.

echo '<div class="mn-pro-ctn" id="proContainer">';
foreach($products as $product){
echo '<div class="product-crd">';
echo '<h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h5>';
echo '</div>';
 }

echo '</div>'; // mn-pro-ctn closing div

echo '<div class="mn-pro-ctn" id="proContainer">';
foreach($products as $product){
echo '<div class="product-crd">';
echo '<h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h5>';
echo '</div>';
 }

echo '</div>'; // mn-pro-ctn closing div

css

.mn-pro-ctn{
    width: 90%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    background: palegoldenrod;
}


.product-crd{
    width: 15%;
    margin-block-end: .5rem;
    margin-inline-end: .5rem;
    background: paleturquoise;
}

 
.product-crd h5{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}


@media (max-width: 900px){
    .mn-pro-ctn{max-width: 100%; }
    
   .product-crd h5{font-size: .8rem;}
}

@media (max-width: 500px){
    .product-crd{min-width: 40%;}

}

.mn-pro-ctn{
    width: 90%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    background: palegoldenrod;
}


.product-crd{
    width: 15%;
    margin-block-end: .5rem;
    margin-inline-end: .5rem;
    background: paleturquoise;
}

 
.product-crd h5{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}


@media (max-width: 900px){
    .mn-pro-ctn{max-width: 100%; }
    
   .product-crd h5{font-size: .8rem;}
}

@media (max-width: 500px){
    .product-crd{min-width: 40%;}

}

I'm applying

.product-crd{min-width: 40%;}

.product-crd{min-width: 40%;}

to small screens cos the width doesn't grow when I use

.product-crd{width: 40%;}

.product-crd{width: 40%;}

Text Causing An Overflow

Similar Threads

Text Causing An Overflow

Similar Threads

Similar Threads

Similar Threads