在jquery中寻找一种方法来堆叠具有左对角线边缘的文本行_Jquery

在jquery中寻找一种方法来堆叠具有左对角线边缘的文本行

jquery

在jquery中寻找一种方法来堆叠具有左对角线边缘的文本行,jquery,Jquery,这个问题基本上与这篇文章相似：但是有一些关键的区别，我希望每一行都有一个固定的线宽，因为我觉得这将有助于包装过程，我将每行的宽度定义为600px，在这一点上，任何超过600px标记的单词都将向下缠绕到下一行，这一行每次都会越来越缩进，以对对角线的左边缘进行评级。代码需要检测所有标准字符a-z、a-z、0-9和所有要包装的标点符号下面是我拼凑的一些代码，它有点像我想要的，但有点问题，我确信这不是最佳实践；它有点长，并且可以显著减小大小（我真的需要复制段落还是通过编程创建跨距来让它工作？！）。我

这个问题基本上与这篇文章相似：

但是有一些关键的区别，我希望每一行都有一个固定的线宽，因为我觉得这将有助于包装过程，我将每行的宽度定义为600px，在这一点上，任何超过600px标记的单词都将向下缠绕到下一行，这一行每次都会越来越缩进，以对对角线的左边缘进行评级。代码需要检测所有标准字符a-z、a-z、0-9和所有要包装的标点符号

下面是我拼凑的一些代码，它有点像我想要的，但有点问题，我确信这不是最佳实践；它有点长，并且可以显著减小大小（我真的需要复制段落还是通过编程创建跨距来让它工作？！）。我认为它在检测连字符方面有问题，而且这些行也可能在编程上缩进。我试图查看正则表达式，以便在代码中包含连字符，但它似乎太“完整”！我不明白

提前感谢您的帮助和建议

詹姆斯

以下是指向我的网站的链接：


无标题文件
jQuery.fn.wrapLines=函数（openTag、closeTag）
{
var dummy=this.clone（）.css({
顶部：-9999，
左：-9999，
位置：'绝对'，
宽度：this.width（）
}).appendTo（此.parent（））
，text=dummy.text（）.match（/\S+\S+/g）；
var words=text.length
，lastTopOffset=0
，行=[]
，lineText=“”
;
对于（变量i=0；i
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。在reprehender的Duis或irure dolor

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>


<script type="text/javascript">

  jQuery.fn.wrapLines = function( openTag, closeTag )
  {
    var dummy = this.clone().css({
            top: -9999,
            left: -9999,
            position: 'absolute',
            width: this.width()
        }).appendTo(this.parent())
      , text = dummy.text().match(/\S+\s+/g);

    var words = text.length
      , lastTopOffset = 0
      , lines = []
      , lineText = ''
    ;

    for ( var i = 0; i < words; ++i )
    {
      dummy.html(
          text.slice(0,i).join('') +
          text[i].replace(/(\S)/, '$1<span/>') +
          text.slice(i+1).join('')
      );

      var topOffset = jQuery( 'span', dummy ).offset().top;

      if ( topOffset !== lastTopOffset && i != 0 )
      {
        lines.push( lineText );
        lineText = text[i];
      } else {
        lineText += text[i];
      }

      lastTopOffset = topOffset;
    }
    lines.push( lineText );

    this.html( openTag + lines.join( closeTag + openTag ) + closeTag );
  };

  $(function()
  {
    $('p').wrapLines( '<span class="line">', '</span>' );
     $('p span:nth-child(2)').css('margin-left', '20px');
        $('p span:nth-child(3)').css('margin-left', '40px');
            $('p span:nth-child(4)').css('margin-left', '60px');
  });

</script>

<style type="text/css">


#back {
    height: 100px;
    width: 717px;
    background: url(back.jpg) no-repeat;
    outline: 1px #FFCC00 dotted;
    color: #FFF;
    font:18px Arial, Helvetica, sans-serif;

}

p {
    bottom:0;
    width: 900px;
    margin-right: 40px;
    outline: 1px #FFCC00 dotted;
    padding: 0 0 0 40px;
    /*vertical-align: baseline;*/
}
</style>

<body>

<div id="back">
<div id=""vert>
<p style="width: 600px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehender.</p>
</div>
</div>
</body>
</html>