将段落中的每一行换行 [英] Wrap each line of paragraph in a span

问题描述

我有一个<div>元素，该元素将显示一个没有断行的段落，如示例中所示

I have a <div> element and which will show a paragraph with no line breaks like in the example

<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</div>

这里，文本将根据其容器的宽度分成多行，我试图将每行自动调整大小的行包装到一个span元素中，但是我做不到，因为我们找不到使用\n行的末尾.是否有任何方法可以实现这一目标?

Here the text will split as a number of lines according to the width of its container, I am trying to wrap each of the auto-sized lines into a span element.but I failed to do this because we can't find the end of the lines using \n.is there any method to achieve this?

注意-我在搜索

Note- I find an answer for this when i am searching Can I wrap each line of multi-line text in a span? . but the questin is not similer to this,here i have a test in single line and there is no line break.but the above question have line break on each line

推荐答案

这应该做您想要的事情，或者接近它.

This should do what you want, or close to it.

function trimByPixel(str, width) {
    var spn = $('<span style="visibility:hidden"></span>').text(str).appendTo('body');
    var txt = str;
    while (spn.width() > width) { txt = txt.slice(0, -1); spn.text(txt + "..."); }
    return txt;
}

var stri = $(".str").text();

function run(){
  var s = trimByPixel(stri, $(".str").width()).trim()
  stri = stri.replace(s,"")
  $(".result").append("<span>"+s+"</span>");

  if(stri.trim().length > 0){
    run();
  }
}

run();

演示

function trimByPixel(str, width) {
    var spn = $('<span style="visibility:hidden"></span>').text(str).appendTo('body');
    var txt = str;
    while (spn.width() > width) { txt = txt.slice(0, -1); spn.text(txt + "..."); }
    return txt;
}

var stri = $(".str").text();

function run(){
  var s = trimByPixel(stri, $(".str").width()).trim()
  stri = stri.replace(s,"")
  $(".result").append("<span>"+s+"</span>");
  
  if(stri.trim().length > 0){
    run();
  }
}

run();

.str{
width:300px;
}

.result span{
display:block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="str"> 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</div>

<div class="result"></div>

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