在 Javascript 和/或 jQuery 中，如何在包装的 div 中获取第一行文本

Question

我想获取 div 文本内容的第一行，由于 div 的样式仅显示第一行，因此浏览器将文本换成了几行。这是用于隐藏除第一行之外的所有内容的 HTML div 和样式：

<div id="element"
     style="display: inline-block; height: 20px; overflow: hidden;
            width: 70px;">asdfl asf af adf adsf dsaf adsf adsfdsa fdsaf dsa fdas fdsa f dsaf dsa fdsa f dsaf sad</div>

div内的文字没有预先换行，and标签和包含的文字都在同一行（如图），没有嵌入换行符（\n），字体不固定（因此无法计算字符串中的字符）。

当我检查 div 时，innerHTML 和 innerText 都包含：

"asdfl asf af adf adsf dsaf adsf adsfdsa fdsaf dsa fdas fdsa f dsaf dsa fdsa f dsaf sad"

对于此示例，我只想在修剪任何尾随空格（如果有的话）后获取“asdfl asf”。

问题的核心是能够在浏览器包装字符串时获取字符串。

Answer 1

为了获得第一行，您需要删除所有文本并在循环中逐个添加字符，如果文本的高度大于单个字符，则前一个字符是最后一个。

function get_first_line(element) {
    var original = element.text();
    element.text(original[0]);
    var height = element.height();
    var first = original;
    for (var i = 2; i < original.length; ++i) {
        element.text(original.slice(0, i));
        if (element.height() > height) {
            first = original.slice(0, i - 1);
            break;
        }
    }
    element.text(original);
    return first;
}

编辑这里是带连字符的工作代码，解决方案是将每个字符包装在 span 中，它们是内联元素，因此它们在包装方面与字符相同。

function get_first_line(element) {
  var original = element.text();
  var text = original.trim();
  // if you care about IE change it to normal function
  element.html(text.split('').map((c) => '<span>' + c + '</span>'));
  var chars = element.find('span');
  var offset = chars.eq(0).offset();
  var first = original;
  for (var i = 1; i < chars.length; i++) {
    if (chars.eq(i).offset().top > offset.top) {
      first = text.slice(0, i);
      break;
    }
  }
  element.text(original);
  return first;
}

还有codepen演示https://codepen.io/jcubic/pen/erBRmb?editors=1010