Question

我拼命地试图将随机字符串分成相等的部分，因此我可以分别对每个字符串进行主题化。我的目标是为我的文本制作一个扭曲的效果，但保持文本的合理性并且没有分裂的单词..

正如你在这个例子中看到的那样，我试图做类似的事情，但结果真的很糟糕。：

http://vps10937.ovh.net/hyphenator/WorkingExample1.html（柏拉图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;
      }
    });
});

现在我正在尝试使用插件hyphenator.js正确分割文本并获得相同的行。

http://vps10937.ovh.net/hyphenator/WorkingExample1.html（柏拉图1）

要调用插件，这很容易：

Hyphenator.config({
    displaytogglebox : true,
    minwordlength : 4
});
Hyphenator.run();

结果很漂亮，但有了这个，我不能在每一行上应用CSS来使我的文字扭曲。我已经从上到下探索了hyphenator.js（点击这里查看源代码）文件，但是没有找到任何东西来拆分行上的文字..

修改的

我修改了a plugin I found on github。有了这个，我现在能够做一些接近结果的事情。但仍有一些问题。

http://vps10937.ovh.net/hyphenator/WorkingExample1.html（柏拉图3）

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

2）文本不再合理，因此行不完全相等......

3）仅适用于 Firefox !!

Here is the code http://vps10937.ovh.net/hyphenator/jquery.truncatelines.js

$.fn.truncateLines = function(options) {
options = $.extend($.fn.truncateLines.defaults, options);

return this.each(function(index, container) {

    container = $(container);
    var containerLineHeight = Math.ceil(parseFloat(container.css('line-height')));

    var maxHeightFixed = containerLineHeight;
    //var maxHeight = options.lines * containerLineHeight;

    var truncated = false;
    var truncatedText = $.trim(container.text());
    //var overflowRatio = container.height() / maxHeight;

    var oldTruncatedText; // verify that the text has been truncated, otherwise you'll get an endless loop
    var oldContainerHeight;
    textArray= new Array();

    jQuery(document.body).append('<p class="paragraphProvisory1" style="display: none;"></p>');
    jQuery(document.body).append('<p class="paragraphProvisory2" style="display: none;"></p>');

    while (container.height() > 0 && oldTruncatedText != truncatedText) {
        if(oldContainerHeight!=container.height()){


            truncatedTextTest = truncatedText;
            jQuery('.paragraphProvisory1').text(truncatedTextTest);

            //11nd line 
            if(container.height()==containerLineHeight*11){
                createLine(10);
            }
            //10nd line 
            if(container.height()==containerLineHeight*10){
                createLine(9);
            }
            //9nd line  
            if(container.height()==containerLineHeight*9){
                createLine(8);
            }
            //8nd line  
            if(container.height()==containerLineHeight*8){
                createLine(7);
            }
            //7nd line  
            if(container.height()==containerLineHeight*7){
                createLine(6);
            }
            //6nd line  
            if(container.height()==containerLineHeight*6){
                createLine(5);
            }
            //5nd line  
            if(container.height()==containerLineHeight*5){
                createLine(4);
            }
            //4nd line  
            if(container.height()==containerLineHeight*4){
                createLine(3);
            }
            //3nd line  
            if(container.height()==containerLineHeight*3){
                createLine(2);
            }
            //2nd line  
            if(container.height()==containerLineHeight*2){
                createLine(1);
            }
            //1st line      
            if(container.height()==containerLineHeight*1){
                textArray[0]= "<div class='line1'>"+truncatedTextTest+"</div>";     
            }

        }

        oldTruncatedText = truncatedText;
        oldContainerHeight = container.height()
        truncatedText = truncatedText.replace(/\s.[^\s]*\s?$/, ''); // remove last word
        container.text(truncatedText);

    }

    jQuery('.platon3').text('');
    jQuery.each(textArray, function(i) {
     jQuery('.platon3').append(textArray[i]);
});

});
};
function createLine(rowNumber){
    var oldTruncatedTextTest;
    var row = 0;
    positionLeft = rowNumber * 10;
    rowNumber++;
    jQuery('.paragraphProvisory2').text(truncatedTextTest);
        containerTest = $('.paragraphProvisory2');
        while (containerTest.height() > 20 && oldTruncatedTextTest != truncatedTextTest) {
            row++;
            oldTruncatedTextTest = truncatedTextTest;
            truncatedTextTest = truncatedTextTest.substr(truncatedTextTest.indexOf(" ") + 1);
            jQuery('.paragraphProvisory2').text(truncatedTextTest);
            if(containerTest.height()==20){
                textArray[rowNumber]= "<div class='line"+rowNumber+"' style='position: relative; left: -"+positionLeft+"px;'>"+truncatedTextTest+"</div>";
            }
        }
};

Answer 1

这不完全是您想要的，但您可以将整个文本容器倾斜以适应使用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;
}

Answer 2

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

        Hyphenator.config({                
classname : 'yourclass',             

 })

如何在javascript中以x等号分割字符串（文本对齐）

2 个答案: