I'm building an e-commerce website. All products are displayed in separate divs. I have one problem: In each product's Div, I want to display a part of the product description. When the product description is longer than the div, it simply displays the description over the edges of the div. I have tried to put the problem in a picture:
Now, as you can see in the picture, I would like to solve three problems:
- I want to limit the text to fit the div.
- I want to make sure this is not done somewhere in the middle of a word
- I want to add an "read more" link at the end of the description preview.
Now I have seen this a lot in other e-commerce websites, but after looking for hours I have not found a clear description on how to do this.
This is the code that generates 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:">
<? echo $output_array[$i]["itemDescription"];
echo '</div>';
?>
<?php
echo '<div id="itemComment" class="itemComment"">
Lees verder!
</div>
</div></a>';
}
Does anyone know how to solve these problems? Any help would be much appreciated. Thanks in advance!
UPDATE
Answers have led me to "Line Clamping", which seem to be css or javascript codes that perform the task I need. Implementing both the javascript code provided by musically_ut and the css from Unamata Sanatarai bring me to this:
I can say that progress has been made, as the text does not just over cross the borders of my div. I only have 2 problems left:
- The text clamped text is for some reason running through underneath the footer of my product card
- It sometimes interrupts a word. (it is dutch. the word that should be there is "beschikt".)
any suggestions are welcome
PS: The second screenshot was taken with the css implementation, as the javascript implementation only worked on one product (probably because product cards are divs generated by a php 'for' loop)