查找行包裹 [英] Finding line-wraps

问题描述

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

Lorem ipsum dolor sit amet，consectetur adipiscing elit。

但是无论什么原因（包含元素的宽度设置，使用文本缩放等），在查看器的屏幕上显示为两行或更多行。

Lorem ipsum dolor sit amet，

consectetur adipiscing elit。

或

Lorem ipsum dolor sit

amet，consectetur

adipiscing elit。

有没有办法通过javascript发现哪些线包裹发生？

$（'p'）。text（）和 $（'p'）。html（） return Lorem ipsum dolor sit amet，consectetur adipiscing elit。无论文字如何显示。

解决方案

这是我最后使用的（自由批评和复制为自己的恶意目的）。 p>

首先，当用户进入编辑时，它与 $（editableElement）.lineText（userInput）。

  jQuery.fn.lineText = function（userInput）{
 var a = userInput.replace（/ \\ n / g，\\\
< br /> ）.split（）; 
 $ .each（a，function（i，val）{
 if（！val.match（/ \\\
 /）&& val！= ）a [i] ='< span class =word-measure>'+ val +'< / span>'; 
}）; 
 $（this） （a.join（））; 
}; 
  

编辑文本框填充 $（editableElement）.text（），忽略< br /> 标签，但是为了排版目的，他们仍然会改变显示屏中的以下行的高度，这不是初始目标的一部分，只是相当低的水果。

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

  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&我++）{
v ar prevY = $（this）.children（。word-measure：eq（+（i-1）+））。 
 if（$（this）.children（。word-measure：eq（+ i +））。offset（）。top == prevY）{
 lineAcc.push ）。儿童（：+ I + 字度量当量（ ））文本（））;。 
} 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 ）。最佳}）; 
 return textAcc; 
}; 
  

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

  [{text：Some dummy set to，top：363}，
 {text：shows ...，top：382}，
 {text：此输出，top：420}，
 {text ：wrap-detector，top：439}] 
  

如果我只是想要格式化文本 $（editableElement）.text（）仍然返回

 一些虚拟设置来演示...这个包裹检测器的输出。 
  

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

Lorem ipsum dolor sit 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 sit amet,

consectetur adipiscing elit.

or

Lorem ipsum dolor sit

amet, consectetur

adipiscing elit.

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

$('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).

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(/\n/g, " \n<br/> ").split(" ");
   $.each(a, function(i, val) { 
      if(!val.match(/\n/) && val!="") a[i] = '<span class="word-measure">' + val + '</span>';
   });
   $(this).html(a.join(" "));
};

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.

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

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

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

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