Подсчет количества строк текста в делении

Question

У меня есть заголовок и описание в моем div, и у меня есть требование, чтобы, если длина заголовка была больше чем одна строка, я должен скрыть описание, используя 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>

Я попробовал другой подход изссылки ниже, но у меня пока ничего не работает.

Как подсчитать строки текста внутри элемента DOM? Могу я?

Также я пробовал с количеством символов, но это не очень хорошее решение, так как может измениться экран.

Answer 1

Вы можете сделать что-то вроде этого:

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);
}

Затем вызвать: countLines($('.text .text_description'))

Демо обновляется функцией скрытия, если в .text_title* больше 1 строки1008 *

Демо

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>

Answer 2

Эта динамическая функция будет полезна. Вы можете показать количество строк, передав selector, или вы можете получить номер счетчика строк в качестве возвращаемого значения. Хорошо работает на window resize. Вот демо.

$(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>

ИЛИ

Если вы хотите скрыть текст описания, только если длина строки заголовка больше одной,Вот простая демонстрация.

$(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>