Question

以下是一个示例代码：http://jsfiddle.net/gppjvjjs/1/

正如您所看到的，有可编辑的DIV内容，即句子。一个句子＆lt; =＆gt;一个SPAN

问题是DIV块开始时的换行符。如何删除它，保留剩余内容的格式？

DIV内容是使用文本文件中的文本以编程方式生成的，但不包含在jsfiddle中，但这里是函数：

/* Reads sentences from loaded text. */
readSentences = function(text) {
  var lines = [],
    i = 0;

  $.each(text.split("\n"), function(key, value) {
    i++;
    var wrapper  = $('<div/>'),
      span  = $('<span/>').attr('num', i),
      sentencesMatch = value.match(/([\sa-zA-Z\d]){1}.+?[\.!\?]{1}([\s]+|$)/g);
// console.log(sentencesMatch);
    if (sentencesMatch !== null && sentencesMatch.length) {
      var sentences = '';

      $.each(sentencesMatch, function(k, v) {
        var trimmedValue = $.trim(v);

        if (trimmedValue != "") {
          if (k > 0) {
            i++;
            span.attr('num', i);
          }

          span.text(trimmedValue);

          sentences += wrapper.append(span).html() + ' ';
        }
      });

      lines.push(sentences);
    }
    else {
      var trimmedValue = $.trim(value);
      span.text(trimmedValue);

      if (trimmedValue != "") {
        var line = wrapper.append(span).html() + ' ';
      } else {
        // This line creates empty span
        // var line = wrapper.append(span).html();
      }

      lines.push(line);
    }
  });

  return lines.join('\n');
}

Answer 1

问题是，在内容可编辑<div>的开头确实有一个换行符。

只需删除第一个<span>元素的换行符，以便它在开始>标记的<div>字符后直接运行，如下所示：

<div id="window-oreo" class="form-control" contenteditable><span num="1" class=""

jsFiddle Demo

要执行此操作，您可能需要从生成<div>内容的函数中返回文本的剪裁版本，例如：

return $.trim( lines.join('\n'); );

Answer 2

@Grald @BenM删除了white-space: pre-line;并将{return}语句替换为return lines.join('<br />');

感谢您提供线索！ :)

DIV在其内容之前创建换行符

2 个答案: