Question

我们假设我们在一个使用整个屏幕空间的<p>内有此文字：

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum 
sem consectetur, tempor massa quis, bibendum mauris. Curabitur et leo 
pharetra, condimentum mi vel, gravida mi. Integer pulvinar nibh in 
laoreet auctor. Donec in tortor in augue maximus fermentum et non erat. 
Sed auctor feugiat dolor eget efficitur. Vivamus nec urna lorem. Duis 
lobortis semper tempor. Vestibulum dolor lectus, consectetur.

如果我们使用较小的显示器，它看起来就像这样：

Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Sed vestibulum sem 
consectetur, tempor massa quis, bibendum 
mauris. Curabitur et leo pharetra, 
condimentum mi vel, gravida mi. Integer 
pulvinar nibh in laoreet auctor. Donec 
in tortor in augue maximus fermentum et 
non erat. Sed auctor feugiat dolor eget 
efficitur. Vivamus nec urna lorem. Duis 
lobortis semper tempor. Vestibulum dolor 
lectus, consectetur.

该段现在比以前更多。话虽如此，我想将每个段落转换为每行一个<p>，以便为每个段落应用不同的样式，同时也考虑到行数可以从视口/浏览器窗口大小改变。这样，文本样式就可以响应。

HTML：

<p>Lorem ipsum dolor sit amet, consectetur</p> 
<p>adipiscing elit. Sed vestibulum sem</p> 
<p>consectetur, tempor massa quis, bibendum</p> 
<p>mauris. Curabitur et leo pharetra,</p> 
<p>condimentum mi vel, gravida mi. Integer</p> 
<p>pulvinar nibh in laoreet auctor. Donec</p> 
<p>in tortor in augue maximus fermentum et</p> 
<p>non erat. Sed auctor feugiat dolor eget</p> 
<p>efficitur. Vivamus nec urna lorem. Duis</p> 
<p>lobortis semper tempor. Vestibulum dolor</p> 
<p>lectus, consectetur.</p>

我正在寻找纯JavaScript（又名无jQuery）解决方案。

Answer 1

document.body.addEventListener("load", function(){
  var defaultCharacterWidth = 8; //8 px
  var textboxWidth = document.querySelector(".orgText").offsetWidth;
  var breakIndex = Math.floor(textboxWidth/defaultCharacterWidth);
  var i = 0;
  var savedIndex = 0;
  var whitespace = 0;
  document.querySelector(".orgText").textContent.match(/[\s\S]/g).forEach(function(element, index){
    if (element.match(/\s/))
    {
      whitespace = index;
    }
    
    if (i == breakIndex)
    {
      i = -1;
      //get nearest whitespace
      document.querySelector(".textcontainer").innerHTML += "<p>" + document.querySelector(".orgText").value.slice(savedIndex, whitespace) + "</p>";
      savedIndex = whitespace; //save the last whitespace
    } 
    i++;
  });
}, true);

<textarea class="orgText" style="overflow:hidden;width:100%">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum sem consectetur, tempor massa quis, bibendum mauris. Curabitur et leo pharetra, condimentum mi vel, gravida mi. Integer pulvinar nibh in laoreet auctor. Donec in tortor in augue maximus fermentum et non erat. Sed auctor feugiat dolor eget efficitur. Vivamus nec urna lorem. Duis lobortis semper tempor. Vestibulum dolor lectus, consectetur. 
</textarea>

<div class="textcontainer">
</div>

这是一个小测试代码。它使用textarea具有固定字符宽度的事实。但大多数字体都不是这样。上面的代码遍历每个字符，并根据检测到的空格字符检查它是否超过容器的宽度。

您还可以使用以下代码计算字符串的宽度。

function getPixelLengthOfString()
{
    var tempNode = document.createElement("span");
    tempNode.innerHTML = this;
    document.body.appendChild(tempNode);
    var stringPixelLength = tempNode.offsetWidth;
    document.body.removeChild(tempNode);
    return stringPixelLength;
}

这些代码应该指向正确答案的方向。

将多行包装段落转换为单行段落

1 个答案: