How to make text responsive to div size?

Question

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)

Answer 1

What you want is multiple line clamping. Unfortunately, CSS so far only allows clamping of the first line of text. Webkit/Opera allow for clamping of multiple lines, but I suspect it will not help you much here.

There are several workarounds (even one which is all-CSS) described here: http://css-tricks.com/line-clampin/

The most reliable, however, seems to be using javascript for the task: Clamp.js.