如何在javascript中将字符串拆分为x等分行（文本对齐）

我拼命想把一个随机的字符串分成相等的部分，这样我就可以分别为它们设置主题。我的目标是为我的文本制作一个扭曲的效果，但是保持文本的合理性，并且没有分裂的单词

正如您在本例中看到的，我尝试过这样做，但结果非常糟糕

（柏拉图2）

这是我的密码：

jQuery(document).ready(function() {
    jQuery('p.platon2').each(function(index) {
    lengthTotal = jQuery(this).text().length
    var string = jQuery(this).text();
    string = jQuery.trim(string);
    var length = 56;
    var trimmedString = string.substring(0, length);
    jQuery(this).text('');
    lengthTotalPrev = 0;
    j=0;
    z=0
      for (i=length; i<lengthTotal;  i=i+length){
        j++;
        z=z+5;
        rowString = string.substring(lengthTotalPrev, i);
        jQuery(this).append('<span id="row'+j+'" class="rows" style="position:relative;left:-'+z+'px;">'+rowString+'</span>');
        lengthTotalPrev = i;
      }
    });
});

结果很好，但是有了这个，我不能在每一行应用CSS来扭曲我的文本。我已经从上到下浏览了（单击此处查看源代码）文件，但没有找到任何可以在行上拆分文本的内容

---

编辑

---

我改了。有了这些，我现在能够做一些接近预期结果的事情。但仍然存在一些问题

（柏拉图3）

1） 脚本非常慢。是否可以缓存结果

2） 文字不再对齐，所以线条不完全相等

3） 仅适用于Firefox

$.fn.truncateLines=函数（选项）{
options=$.extend（$.fn.truncateLines.defaults，options）；
返回此.each（函数（索引、容器）{
容器=$（容器）；
var containerLineHeight=Math.ceil（parseFloat（container.css（'line-height'））；
var maxHeightFixed=容器线高度；
//var maxHeight=options.lines*containerLineHeight；
var=false；
var truncatedText=$.trim（container.text（））；
//var overflowRatio=container.height（）/maxHeight；
var oldTruncatedText；//验证文本是否已被截断，否则将得到一个无休止的循环
var oldContainerHeight；
textArray=新数组（）；
jQuery（document.body）.append（'
”）；
jQuery（document.body）.append（'
”）；
while（container.height（）>0&&oldTruncatedText！=truncatedText）{
if（oldContainerHeight！=container.height（））{
truncatedText测试=truncatedText；
jQuery（'.paragraphProvisiory1'）.text（truncatedTextTest）；
//第11行
if（container.height（）==containerLineHeight*11）{
createLine（10）；
}
//第10行
if（container.height（）==containerLineHeight*10）{
createLine（9）；
}
//第9行
if（container.height（）==containerLineHeight*9）{
createLine（8）；
}
//第8行
if（container.height（）==containerLineHeight*8）{
createLine（7）；
}
//第七行
if（container.height（）==containerLineHeight*7）{
createLine（6）；
}
//第六行
if（container.height（）==containerLineHeight*6）{
createLine（5）；
}
//第五行
if（container.height（）==containerLineHeight*5）{
createLine（4）；
}
//第四行
if（container.height（）==containerLineHeight*4）{
createLine（3）；
}
//第三条线
if（container.height（）==containerLineHeight*3）{
createLine（2）；
}
//二线
if（container.height（）==containerLineHeight*2）{
createLine（1）；
}
//一线
if（container.height（）==containerLineHeight*1）{
textArray[0]=“truncatedTextTest+”；
}
}
oldTruncatedText=truncatedText；
oldContainerHeight=container.height（）
truncatedText=truncatedText.replace（//\s.[^\s]*\s？$/，“”）；//删除最后一个单词
container.text（截断文本）；
}
jQuery（'.platon3'）.text（''）；
每个（文本数组，函数（i）{
jQuery（'.platon3'）.append（textArray[i]）；
});
});
};
函数createLine（行数）{
var-oldTruncatedTextTest；
var行=0；
位置左=行数*10；
行数++；
jQuery（'.paragraphProvisiory2'）.text（truncatedTextTest）；
containerTest=$（“.第2款但书”）；
while（containerTest.height（）>20&&oldTruncatedTextTest！=truncatedTextTest）{
行++；
oldTruncatedTextTest=truncatedTextTest；
truncatedTextTest=truncatedTextTest.substr（truncatedTextTest.indexOf（“”+1）；
jQuery（'.paragraphProvisiory2'）.text（truncatedTextTest）；
if（容器测试高度（）==20）{
textArray[rowNumber]=“”+truncatedTextTest+“”；
}
}
};

这并不是您想要的，但是您可以使用css3扭曲整个文本容器：

.platon {
  transform: skew(160deg,0deg);
  -ms-transform: skew(160deg,0deg);
  -moz-transform: skew(160deg,0deg);
  -webkit-transform: skew(160deg,0deg);
  -o-transform: skew(160deg,0deg);
  width: 367px;
}

---

如果我理解正确，您希望将自己的CSS应用于每个连字符行。。。 因此，您可以这样定义自己的

classname

：

        Hyphenator.config({                
classname : 'yourclass',             

 })

---

为什么不发布您迄今为止创建的代码呢。所以其他人可以帮助你建立代码。正如你所希望的，我发布了我所有的！那太有趣了！我假设你从未找到一个你满意的跨浏览器解决方案？我正在考虑将内容分成水平相等的列甚至块的可能性，以模拟许多媒体滑块的转换。移动到画布可能会更容易（虽然我还没有使用画布来真正了解），谢谢你，但我已经知道这个css规则。问题在于与internet explorer的兼容性。我需要它在每个浏览器中都绝对有效。你好，不，这不正是我需要的。我想要像我的例子柏拉图3一样的东西，但是这些线并不完全相等

.platon {
  transform: skew(160deg,0deg);
  -ms-transform: skew(160deg,0deg);
  -moz-transform: skew(160deg,0deg);
  -webkit-transform: skew(160deg,0deg);
  -o-transform: skew(160deg,0deg);
  width: 367px;
}

        Hyphenator.config({                
classname : 'yourclass',             

 })