0

看看这个<div>元素：

<div id="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque pena&shy;tibus et magnis dis parturient montes, nascetur ridiculus mus.</div>

这个CSS：

div#text {
    font-family: Arial;
    font-size: 16px;
    width: 200px;
}

当这个 div 被渲染时，它被分成许多行，可能看起来像这个块：

Lorem ipsum dolor sit amet，
consectetuer adipiscing elit。
Aenean commodo ligula
eget dolor。埃涅马萨。
Cum sociis natoque pena-
tibus et magnis dis
parturient montes, nascetur
ridiculus mus。

有没有办法使用Javascript提取这个div内容的第6行？这意味着，我想要一个函数，我将值传递给它3，然后它返回»tibus et magnis dis«。这可能吗？如果是这样，如何做到这一点？

&shy;单词»penatibus« 中的软连字符 ( ) 使该单词分成两部分。

以类似的方式，考虑 css-property hyphen：

div#text {
    hyphens: auto;
}

这会导致渲染机器在不需要插入破折号或实体的情况下对文本进行连字符&shy;。

请记住，文本中没有换行符或<br>任何其他将文本拆分为行的标记。只是渲染机器的自动换行算法以及 css 样式和文本字符串本身负责将哪些单词写入哪一行。

这也是这个问题与 this 不同的原因。

这个问题也与这个问题不同，因为那里发布的解决方案忽略了连字符的影响。

还要考虑连字（比如在许多字体中 f 后跟 i 被替换为新字形 fi，它比普通 f 后跟普通 i 短一点。这可能会影响自动换行和断字。但是当您将文本的每个字符放入<span>-element 以便能够读取所有这些元素的位置时，您将不会看到 f 和 i 被其较短的连字 fi 替换，因此此方法不会返回正确的结果所有情况。

4

1 回答 1

2

我猜你可能会骗一点，并复制现有元素的宽度，然后每个单词添加一个单词以查看新元素的高度是否发生变化，然后增加行。

我写了一个基本版本。这仅考虑了 div 元素的宽度，没有考虑其他样式（如字体大小、字母间距……为此，您可以从希望从中获取行 nr 的元素中复制 css 样式)

function copyStyle(source, target) {
  var computedStyle = window.getComputedStyle(source, null),
    prop, obj = computedStyle, i, len, style = '';
  for (i = 0, len = computedStyle.length; i < len; i++) {
      prop = computedStyle[i];
      style += prop + ': ' + obj[prop] + ';';
  }
  target.style = style;
}

function extractHyphens(array) {
  var word, i, len, shyElement = document.createElement('span');
  shyElement.innerHTML = '&shy;';
  for (i = 0, len = array.length; i < len; i++) {
    word = array[i];
    if (word.indexOf(shyElement.innerHTML) >= 0) {
      word = word.split(shyElement.innerHTML);
      array.slice(i, 1, word);
    }
  }
}

function getLine(element, lineNr, callback, measuredWidth) {
  var hiddenElement,
    sourceElement = document.getElementById(element),
      textarea = document.getElementById('textarea'),
    lastHeight,
    outline = '',
    curline = -1,
    words, word;

  if (typeof measuredWidth === 'undefined' ||
    measuredWidth !== sourceElement.offsetWidth) {
    measuredWidth = sourceElement.offsetWidth;
    setTimeout(function() {
      getLine(element, lineNr, callback, measuredWidth);
    }, 100);
  } else {
    hiddenElement = document.createElement('div');
    words = sourceElement.innerHTML;
    words = words.split(' ');
    extractHyphens(words);
    copyStyle(sourceElement, hiddenElement);
    hiddenElement.style.visibility = 'hidden';
    // we don't want anything affecting the height of the "hidden" element
    hiddenElement.style.height = 'auto';
    delete hiddenElement.style['minHeight'];
    delete hiddenElement.style['maxHeight'];
    document.body.appendChild(hiddenElement);
    lastHeight = hiddenElement.offsetHeight;
    for (var i = 0, len = words.length; i < len; i++) {
      word = words[i];
      hiddenElement.innerHTML += word;
      if (lastHeight !== hiddenElement.offsetHeight) {
        curline++;
      }
      if (lineNr === curline) {
        outline += word + ' ';
      }
      hiddenElement.innerHTML += ' ';
      lastHeight = hiddenElement.offsetHeight;
      if (curline > lineNr) {
        break;
      }
    }
    document.body.removeChild(hiddenElement);
    setTimeout(function() {
      callback(element, outline);
    }, 0);
  }
}

function showResult(element, result) {
  alert(element + ': ' + result);
}

window.onload = function() {
  getLine('test', 1, showResult);
  getLine('test2', 6, showResult);
};
#test2 {
  width: 50px;
  font-size: 7px;
  padding: 3px;
}
div {
  padding: 5px;
}
<div id="test">lorem ipsum dolor sit amet, consectetuer adipiscing elit, aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque&shy;&raquo;penatibus&laquo; et magnis dis parturient montes, ascetur ridiculus mus.</div>
<div id="test2">lorem ipsum dolor sit amet, consectetuer adipiscing elit, aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, ascetur ridiculus mus.</div>

于 2015-05-04T19:22:24.150 回答