Counting number of lines of text in a div

Question

I have title and description in my div and I have the requirement that if the title length is more than one line then I have to hide the description using JQuery.

<div class="text">
    <div>
        <div class="text_title">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </div>
        <div class="text_description">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
    </div>
</div>

I tried different approach from below links but nothing is working for me yet.

How can I count text lines inside an DOM element? Can I?

Also I tried with character count but this is not a good solution as the screen layout may change.

can you put java script efforts in your answer ? – Jinesh Oct 14 '19 at 07:28 — Jinesh, Oct 14 '19 at 07:28

Carsten Løvbo Andersen · Answer 1 · 2019-10-14T07:35:25.277

You could do something like this:

function countLines(obj) {
  var el = $(obj)
  var divHeight = el.outerHeight()
  var lineHeight = parseInt(el.css("line-height").replace("px",""));
  var lines = divHeight / lineHeight;
  console.log("Lines: " + lines);
}

Then call: countLines($('.text .text_description'))

Demo is updated with the hide function if there is more than 1 lines in .text_title

Demo

if (countLines($('.text .text_title')) > 1){
  $('.text_description').hide()
}

function countLines(obj) {
  var el = $(obj)
  var divHeight = el.outerHeight()
  var lineHeight = parseInt(el.css("line-height").replace("px",""));
  var lines = divHeight / lineHeight;
  return lines;
}

.text_title {
  line-height: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text">
  <div>
    <div class="text_title">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </div>
    <div class="text_description">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
  </div>
</div>

Asfan Shaikh · Answer 2 · 2019-10-14T09:58:26.283

This Dynamic function will be helpful. You can show number of lines by passing selector or you can get Line counter number as return value. Works well on window resize. Here is the demo.

$(document).ready(function() {

  function countLines($ele, $targetEle){

    var myText = $ele.text().split(' ');
    var mainTop = $ele.offset().top;
    var preVal = mainTop;
    var counter = 1;

    $ele.text('');

    $.each(myText, function(){
      if(this != ''){
        $ele.append('<span style="display:inline-block; white-space:pre-wrap;">'+this+' </span>');  
      }
    });

    if($ele.children('span').length != 0){
      $ele.children('span').each(function(){
        var thisTop = $(this).offset().top;
        if (preVal != thisTop){
          counter++;
          preVal = thisTop;
        }
      });
    }

    var textString = '';
    $ele.children('span').each(function(){
      textString += $(this).text();
      $(this).remove();
    });

    $ele.html(textString);

    if($targetEle){
      $targetEle.children('.counter').text(counter);  
    }
    return counter;
  }

  function checkLines(){
    // Getting Counter value in Variable with Target Element to show Numbers(Target Element is optional).
    var myCount = countLines($('.text_title'), $('#line1'));
    if(myCount > 1){
      $('.text_description, #line2').hide();
    }
    else{
      $('.text_description, #line2').show();
    }
    
    // Getting Counter value with Target Element to show Numbers(Target Element is optional).
    countLines($('.text_description'), $('#line2'));
  }

  checkLines();

  $(window).resize(function(){
    checkLines();
  });

});

*, *:after, *:before{
 box-sizing: border-box;
}
body {
 font-family: 'Open Sans', serif;
 background-color: #d1d8de;
 padding: 20px;    
}
.text_title, .text_description{
  margin-top: 10px;
}
.lines{
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text">
    <div>
        <div class="text_title">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </div>
      <div class="lines" id="line1">Title lines : <span class="counter">0</span></div>
        <div class="text_description">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
    </div>
</div>
<div class="lines" id="line2">Description lines : <span class="counter">0</span></div>

OR

If you want to only hide description text when title line length is more than one. Here is simple demo.

$(document).ready(function() {

  function countLines($ele){
    var breaking = false;
    $ele.css({
      'white-space': 'nowrap',
      'overflow': 'hidden'
    });
    var preHeight = $ele.innerHeight();
    $ele.removeAttr('style');
    var currHeight = $ele.innerHeight();
    if (currHeight > preHeight){
      breaking = true;
    }
    return breaking;
  }

  function checkLines(){
    var myCount = countLines($('.text_title'));
    if(myCount == true){
      $('.text_description').hide();
    }
    else{
      $('.text_description').show();
    }
  }

  checkLines();

  $(window).resize(function(){
    checkLines();
  });

});

*, *:after, *:before{
 box-sizing: border-box;
}
body {
 font-family: 'Open Sans', serif;
 background-color: #d1d8de;
 padding: 20px;    
}
.text_title, .text_description{
  margin-top: 10px;
}
.lines{
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text">
    <div>
        <div class="text_title">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </div>
        <div class="text_description">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
    </div>
</div>

Counting number of lines of text in a div

2 Answers2