如何使用jQuery统计文章原始实际行数，不受CSS行数截断影响？

实现方法 #

核心思路是临时生成一个无样式限制的克隆元素，拿到完全展开后的真实高度后除以单行行高，即可得到实际总行数，不会受当前CSS的2行限制影响。
首先确保你已在页面中引入jQuery库，可直接使用如下代码：

// 获取目标元素
const $info = $('.info');
// 克隆元素并移除行数限制相关样式
const $clone = $info.clone()
  .css({
    position: 'absolute',
    visibility: 'hidden',
    height: 'auto',
    overflow: 'visible',
    '-webkit-line-clamp': 'unset'
  })
  .insertAfter($info);
// 自动计算单行高度，无需写死数值，修改CSS后也能适配
const lineHeight = parseFloat($info.css('line-height'));
// 计算真实行数，向上取整避免小数误差
const realLineCount = Math.ceil($clone.height() / lineHeight);
// 用完删除克隆元素，避免占用多余DOM节点
$clone.remove();
// 可根据业务需求使用realLineCount变量
console.log('文章真实总行数：', realLineCount);

补充说明 #

• 该方法会自动识别<br>标签带来的强制换行和内容自动换行，计算结果准确
• 临时生成的克隆元素不会在页面上可见，也不会影响原有页面样式和交互
• 后续如果修改了.info的字体大小、行高、容器宽度等样式，代码无需调整也能自动适配计算

内容的提问来源于stack exchange，提问作者AWEI