Question

是否可以（以及如何）使用JavaScript将一段文本拆分为各自的行。我想做的是在段落或块引用的每一行上实现悬挂标点符号，而不仅仅是起始行。

欢迎任何其他想法！

澄清我被要求对“将一个段落分成各自的行”的含义不那么模糊。

在HTML中，<p>元素会创建一个文本块。同样，许多其他元素也是如此。这些文本主体被包装以适应宽度（无论该宽度是由css设置还是由默认设置假定）我似乎无法使用正则表达式或任何其他方法检测换行发生的位置。所以让我们说段落的长度为7行，我希望能够检测到它是7行，以及这些行的开始和结束位置。

寻找\n或\r似乎没有产生任何效果。

Answer 1

执行此操作的强力方法是拆分段落中的所有单词并制作span个单词。然后，您可以测量跨度的offsetTop属性，以查找哪些属于不同行。

在下面的代码段中，getLines()返回一个数组数组，其中每个内部数组都包含一行中每个单词的span元素。然后你可以操作它，因为你希望使用一些CSS来创建悬挂的标点符号，也可以通过插入带有标点符号的绝对定位跨度。

＆＃13;

//So it runs after the animation
setTimeout(function(){
    splitLines();
    showLines();
}, 1000)

function showLines() {
  var lines = getLines();
  console.log(
    lines.map(function(line) {
      return line.map(function(span) {
        return span.innerText;
      }).join(' ')
    }));
}

function splitLines() {
  var p = document.getElementsByTagName('p')[0];
  p.innerHTML = p.innerText.split(/\s/).map(function(word) {
    return '<span>' + word + '</span>'
  }).join(' ');
}



function getLines() {
  var lines = [];
  var line;
  var p = document.getElementsByTagName('p')[0];
  var words = p.getElementsByTagName('span');
  var lastTop;
  for (var i = 0; i < words.length; i++) {
    var word = words[i];
    if (word.offsetTop != lastTop) {
      lastTop = word.offsetTop;
      line = [];
      lines.push(line);
    }
    line.push(word);
  }
  return lines;
}

＆＃13;

<p>Here is a paragraph that we want to track lines for. Here is a paragraph that we want to track lines for. Here is a paragraph that we want to track lines for Here is a paragraph that we want to track lines for Here is a paragraph that we want to track
  lines for Here is a paragraph that we want to track lines for</p>

＆＃13;

这是一个小提琴，您可以调整窗口大小，以便段落更改大小http://jsfiddle.net/4zs71pcd/1/

Answer 2

看起来hanging-punctuation css属性只确保元素的第一个格式化行的开头的任何标点符号都会挂起。因此，您可能希望动态地将文本拆分为正确长度的行，将它们放入新的<p>元素（或块引用）和＆amp;将hanging-punctuation: 'first'应用于这些新元素。截至目前，没有主流浏览器支持hanging-punctuation属性（citation）。

通常我会建议检查换行符（\n）在文本中的位置，但通常没有人明确地将它放在他们写的文本中。相反，他们让浏览器决定在哪里添加新行，具体取决于窗口大小（类似于自动换行）。当你开始考虑给定<p>元素中可能有多行时，这会变得更加棘手。根据浏览器窗口的大小，该行可以在任何地方拆分。您必须抓取文本，找到它的容器宽度，并以某种方式查看文本字符串中它到达该宽度的位置。 Heres a great blogpost讨论了如何在更广泛的意义上实现这一点。

如何使用JavaScript将HTML段落分割为其文本行

2 个答案: