寻找换行符 [英] Finding line-wraps

问题描述

假设我在一行中有一些随机的文本块.像这样

Supposing I have some random block of text in a single line. Like so

Lorem ipsum dolor sat amet, consectetur adipiscing elit.

但无论出于何种原因(包含元素的宽度设置、文本缩放的使用等)，它在查看器的屏幕上显示为两行或更多行.

But for whatever reason (width settings on the containing element, use of text-zoom etc.), on the viewer's screen it displays as two or more lines.

Lorem ipsum dolor sat amet,

consectetur adipiscing elit.

或

Lorem ipsum dolor sat

amet, consectetur

adipiscing elit.

有什么办法可以通过 javascript 找出这些换行发生的地方吗?

Is there any way to find out via javascript where those line-wraps happen?

$('p').text() 和 $('p').html() 返回 Lorem ipsum dolor sat amet, consectetur adipiscing 无论文本如何显示.

$('p').text() and $('p').html() return Lorem ipsum dolor sit amet, consectetur adipiscing elit. regardless of how the text is displayed.

推荐答案

这是我最终使用的(为了你自己的邪恶目的，请随意批评和复制).

Here's what I ended up using (feel free to critique and copy for your own nefarious purposes).

首先，当编辑来自用户时，它被 $(editableElement).lineText(userInput) 分解.

First off, when the edit comes in from the user, it's broken up with $(editableElement).lineText(userInput).

jQuery.fn.lineText = function (userInput) {
   var a = userInput.replace(/
/g, " 
<br/> ").split(" ");
   $.each(a, function(i, val) { 
      if(!val.match(/
/) && val!="") a[i] = '<span class="word-measure">' + val + '</span>';
   });
   $(this).html(a.join(" "));
};

发生换行替换是因为编辑文本框填充了 $(editableElement).text()，它忽略了 <br/> 标签，但它们会出于排版目的，仍然更改显示中下一行的高度.这不是最初目标的一部分，只是相当容易实现的目标.

The newline replacement happens because the editing textbox is populated with $(editableElement).text(), which ignores <br/> tags, but they will still change the height of the following line in the display for typesetting purposes. This was not part of the initial objective, just fairly low-hanging fruit.

当我需要拉出格式化文本时，我调用$(editableElement).getLines()，其中

When I need to pull out formatted text, I call $(editableElement).getLines(), where

jQuery.fn.getLines = function (){
   var count = $(this).children(".word-measure").length;
   var lineAcc = [$(this).children(".word-measure:eq(0)").text()];
   var textAcc = [];
   for(var i=1; i<count; i++){
      var prevY = $(this).children(".word-measure:eq("+(i-1)+")").offset().top;
      if($(this).children(".word-measure:eq("+i+")").offset().top==prevY){
         lineAcc.push($(this).children(".word-measure:eq("+i+")").text());
   } else {
     textAcc.push({text: lineAcc.join(" "), top: prevY});
     lineAcc = [$(this).children(".word-measure:eq("+i+")").text()];
   }
   }
   textAcc.push({text: lineAcc.join(" "), top: $(this).children(".word-measure:last").offset().top});
   return textAcc;
};

最终结果是一个哈希列表，每个哈希都包含一行文本的内容和垂直偏移.

The end result is a list of hashes, each one containing the content and vertical offset of a single line of text.

[{"text":"Some dummy set to","top":363},
 {"text":"demonstrate...","top":382},
 {"text":"The output of this","top":420},
 {"text":"wrap-detector.","top":439}]

如果我只想要无格式文本，$(editableElement).text() 仍然返回

If I just want unformatted text, $(editableElement).text() still returns

"Some dummy set to demonstrate... The output of this wrap-detector."

这篇关于寻找换行符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！