在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中的文本没有预先包装，标签和包含的文本都在同一行(如图所示(，没有嵌入式新线( 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

要获取第一行，您需要删除所有文本，并且在循环中添加字符一个又一个字符，如果文本的高度更大，则单个字符，则先前的字符是最后一个字符。<<<<<<<<<<<</p>

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

edit 在这里使用连字符，解决方案是在跨度中包装每个字符，它们是内联元素，因此它们与包装中的字符相同。

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