I'm currently working on developing my e-commerce website. Each product is showcased in its own separate div, but I've encountered a challenge. The issue arises when the product description exceeds the limits of the div, causing it to overflow outside of its boundaries. Here's an illustration that depicts the problem:
As illustrated, there are three key obstacles that I aim to overcome:
- I intend to restrict the text within the confines of the div.
- I want to ensure that the truncation doesn't occur midway through a word.
- I would also like to include a "read more" link at the end of the previewed description.
While browsing through various e-commerce platforms, I noticed this feature implemented numerous times. Despite conducting extensive research for hours, I haven't come across a clear-cut solution for implementing this functionality.
Here's the code snippet responsible for generating all the product cards:
for($i = 0; $i<$numberOfItems; $i++) {
//echo $output_array[$i]["itemName"];
echo '<a href="/itemDetails.php?itemCode=';echo $output_array[$i]["itemCode"]; echo '&itemName='; echo $output_array[$i]["itemName"];echo'">
<div id="item" style="background-color: transparent; width:243px;height:auto;float:left; margin-left:20px; margin-top:20px; max-width:800px; display:inline-block;">
<div id="itemPicture" class="itemImage"; >
<div id="price" class="pricetag">
<div id="priceText" class="priceText";>';
echo "€".$output_array[$i]["itemPrice"];
echo '</div></div>';
$imageSource = "http://www.imagine-app.nl/ProductImages/".$output_array[$i]["firstImage"].".jpg";
echo '<img src="';echo $imageSource; echo'" style="max-width:100%; border:0px;">
</div>
<div id="itemName" class="itemName"">';
echo $output_array[$i]["itemName"];
echo '</div>'; ?>
<div id="itemDescription" class="itemDescription" style="height:">
<?php echo $output_array[$i]["itemDescription"];
echo '</div>';
?>
<?php
echo '<div id="itemComment" class="itemComment"">
Lees verder!
</div>
</div></a>';
}
If anyone has insights on resolving these issues, your assistance would be greatly appreciated. Thank you in advance!
UPDATE
Following suggestions provided, I delved into the concept of "Line Clamping," which involves CSS or Javascript methodologies to achieve the desired outcome. By incorporating both the Javascript code from musically_ut and the CSS approach by Unamata Sanatarai, I was able to make progress:
Efforts have been fruitful thus far as the text no longer spills beyond the div borders. However, two challenges persist:
- The truncated text sometimes extends below the footer of my product card inexplicably.
- Occasionally, words get cutoff unnaturally (in Dutch, the missing word should be "beschikt").
Your recommendations and suggestions are welcomed.
PS: The second screenshot reflects the CSS integration since the Javascript implementation only functioned correctly with one product card (possibly due to the dynamic generation via PHP 'for' loop).