1
基本上这个问题是类似这样的帖子：Display Paragraph's text with Diagonal Indent寻找在jQuery的方式堆叠的文本行对角线左边缘
但有一些关键的差别，我希望有一个固定的线宽每行都是因为我觉得这将有助于包装过程，我将每行的宽度定义为600px，并且此时任何超过600px标记的单词都将包装到下一行，这将越来越多地缩进每次 - 使对角左边缘坍塌。代码将需要检测所有标准字符a-z，A-Z，0-9以及所有要包装的标点符号。
下面是一些代码（下面）我已经在一起，它有点做我想要的，但有点bug，我敢肯定这不是最佳实践;它有点长，可能会显着缩小（我是否真的需要复制段落或以编程方式创建跨度才能使其工作？！）。我认为它在检测连字符时遇到了问题，并且这些行也可能以编程方式缩进。我试图查看正则表达式，以便在代码中查找连字符，但它似乎太“充满”了！我无法理解。
在此先感谢您的任何帮助和建议。
詹姆斯
这里是我的网站的链接：
http://jimmysmooth.byethost7.com/
<!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>