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

我想得到一个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>

对于本例，我只希望在修剪任何尾随空格（如果有）后获得'asdfl asf'

---

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

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

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

函数获取第一行（元素）{
var original=element.text（）；
元素。文本（原件[0]）；
var height=element.height（）；
var first=原始值；
对于（变量i=2；i高度）{
第一个=原始切片（0，i-1）；
打破
}
}
要素.文本（原件）；
先返回；
}

编辑这里是使用连字符的工作代码，解决方案是在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;
}

函数获取第一行（元素）{
var original=element.text（）；
var text=original.trim（）；
//如果您关心IE，请将其更改为正常功能
html（text.split（“”）.map（（c）=>“”+c+“”））；
var chars=element.find（'span'）；
var offset=chars.eq（0.offset（）；
var first=原始值；
对于（变量i=1；ioffset.top）{
first=text.slice（0，i）；
打破
}
}
要素.文本（原件）；
先返回；
}

---

和codepen demo

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

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

函数获取第一行（元素）{
var original=element.text（）；
元素。文本（原件[0]）；
var height=element.height（）；
var first=原始值；
对于（变量i=2；i高度）{
第一个=原始切片（0，i-1）；
打破
}
}
要素.文本（原件）；
先返回；
}

编辑这里是使用连字符的工作代码，解决方案是在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;
}

函数获取第一行（元素）{
var original=element.text（）；
var text=original.trim（）；
//如果您关心IE，请将其更改为正常功能
html（text.split（“”）.map（（c）=>“”+c+“”））；
var chars=element.find（'span'）；
var offset=chars.eq（0.offset（）；
var first=原始值；
对于（变量i=1；ioffset.top）{
first=text.slice（0，i）；
打破
}
}
要素.文本（原件）；
先返回；
}

---

和codepen demo

这将需要div有用宽度和字体大小来计算行的长度，而不是获取可以容纳的字符串部分。这将需要div有用宽度和字体大小来计算行的长度，我认为你很可能会遇到一些边缘情况，在这些情况下，它并不是那么简单

Fooooo Baaaaaar

可能会被浏览器在连字符处打断为第二行，如果它不适合该行；但是

fooooobaaaa

可能仍然适合，因此当您添加下一个

a

时，脚本意识到文本开始中断，前一个字符将不会仍然显示在前一行。@CBroe也许有人会想出更好的解决方案。不要说它是“坏的”，只是这个问题比一开始想象的要复杂；-）@CBroe创建了另一个解决方案，将每个字符包装在span中（包装工作相同，因为字符是与span相同的内联元素）。做得好，现在肯定值+1了。（虽然软连字符仍然会带来一些问题，但处理这些问题以及它们可能导致的中断可能会变得更加复杂，我想，除非OP明确指出这是一项要求，否则可能不值得费心。）我认为您可能会遇到边缘情况，而实际情况并非如此简单

Fooooo Baaaaaar

可能会被浏览器在连字符处打断为第二行，如果它不适合该行；但是

fooooobaaaa

可能仍然适合，因此当您添加下一个

a

时，脚本意识到文本开始中断，前一个字符将不会仍然显示在前一行。@CBroe也许有人会想出更好的解决方案。不要说它是“坏的”，只是这个问题比一开始想象的要复杂；-）@CBroe创建了另一个解决方案，将每个字符包装在span中（包装工作相同，因为字符是与span相同的内联元素）。做得好，现在肯定值+1了。（虽然软连字符仍然会带来一些问题，但处理这些问题以及它们可能导致的中断可能会变得更加复杂，我想，除非OP明确指出这是一项要求，否则可能不值得费心。）