This is an example of the HTML card structure:
<li class="col-md-4">
<div class="categorylist-item">
<a class="cid-201728169" href="xxxxxxxx">
<h4>Backoffice</h4>
<div class="linebreak"></div>
<p class="description">Orders, deliveries, inventory, promotions, accounting, etc.</p>
<!--<p class="readmore">Read more</p>-->
</a>
</div>
</li>
.container.home .categorylist-item h4 {
font-size: 25px;
font-weight: bold;
margin-bottom: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.container.home .categorylist-item .description {
display: none;
font-size: 18px;
font-weight:400;
margin-top:15px;
}
.container.home .categorylist-item:hover .description {
display: block;
}
.container.home .categorylist-item .readmore {
font-size: 16px;
font-weight: 500;
color: #212529;
display:none;
}
.container.home .categorylist-item:hover .readmore {
display:block;
}
.container.home .categorylist-item .readmore:after {
content: " \00bb";
}
/*Columns on startpage transitions*/
.categorylist-item .cid-201728169 { /*First column transition*/
-moz-transform: translateY(100%);
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
transition: .5s;
}
.categorylist-item:hover .cid-201728169,/*First column transition*/
.categorylist-item .cid-201728169 {
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
Please do not attempt to run this code...
Here is a simple visualization:
When the card is not hovered over:
https://i.sstatic.net/HWDjB.png
When you hover over the card:
https://i.sstatic.net/KXNNY.png
The issue faced is:
https://i.sstatic.net/bgXmz.png
The p tag (description) extends beyond the box.
Is there a way to prevent the text from breaking outside the div..?
Any suggestions?