jquery - 计算 div 中的文本行数

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 元素内的文本行数？我可以吗？

我也尝试了字符数，但这不是一个好的解决方案，因为屏幕布局可能会改变。

标签： jqueryhtml

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'))

如果有超过 1 行，则使用隐藏功能更新演示.text_title

演示

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>