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

Check this Fiddle I created myself:

The script in the fiddle sets the Know More link exactly at the right-bottom corner of the limited area/overflow set(hidden) div according to screen size.On clicking the Know More the visibility of the overflowing content is toggled.

jQuery

/*Only change required in this script if id name of div containing text is different*/
var txtCont = $('#wrappingText');
/*******************************/
var lines = txtCont.get(0).getClientRects();
txtCont.css('display','inline-block');

jQuery.fn.exists = function(){return this.length>0;}

function debugTxt(txt)
{
    var lineHeight = txtCont.css('line-height').replace("px", '');
    var txtContHeight = txtCont.height();
    txtCont.parent().height(lineHeight*Math.floor(txtContHeight/lineHeight));
    if (txt*lineHeight>txtContHeight){
       if(!txtCont.parent().find('.knowMore').exists()){
       txtCont.parent().append('<div class="knowMore">Know </div>');
    }}
    else
       txtCont.parent().find('.knowMore').remove();
}
debugTxt(lines.length);

$('.knowMore').click(function(){
    $(this).prev().toggleClass("visible");
    $(this).toggleClass('knowLess');
    $(this).parent().toggleClass("parentClick");
});

Use of appropriate CSS is required for getting the correct output.Below is the CSS used in the fiddle:

#wrapper{
    position:relative;
}
html,body,#wrapper,#wrappingText{
    margin:0px;
    padding:0px;
    width:100%;
    height:100%;
}
#wrappingText{
    display:inline;
    overflow:hidden;
}
.knowMore{
    position:absolute;
    bottom:0px;
    right:0px;
    background-color:white;
    color:blue;
    cursor:pointer;
}
.knowMore:before{
    content:"...";
}
.knowMore:after{
    content:"More";
}
.knowLess:before{
    content:"";
}
.knowLess:after{
    content:"Less";
}

.visible{
    overflow:visible !important;
}

.parentClick{
    width:auto !important;
    height:auto !important;
}

---

Updated

<div class="container">
.
.
.
<div class="wrapper">
<div class="wrappingText"></div>
</div>
.
.
.
</div>

The above structure should be used for the plugin that is used in the fiddle.You can use the class names that you want.In the above HTML wrappingText is the div containing text.It must be wrapped in another div ,in the above HTML wrappingText is wrapped in div with classname wrapper.

For using the plugin you just have to call the plugin with the classname of div containing text and pass main parent classname as parameter:

$('.wrappingText').knowMoreLess('.container'); // CALLING PLUGIN

Other Instructions and Details are added in the comments in the updated fiddle below:

Updated Fiddle

Answer 2

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.

Answer 3

Using CSS text-overflow and Line Clamping:

div {
  display: block; 
  display: -webkit-box;
  width: 200px;
  height: 40px;
  margin: 0 auto;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  padding:20px;
  overflow:hidden;
  text-overflow: ellipsis;
}

Live example: http://jsfiddle.net/5Z4Wu/