我拼命尝试将一个随机字符串分成相等的部分,这样我就可以分别为每个部分设置主题。我的目标是为我的文本制作一个扭曲的效果,但要保持文本的合理性并且不要拆分单词..
正如你在这个例子中看到的,我曾尝试做类似的事情,但结果真的很糟糕。:
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>";
}
}
};
最佳答案
这不是您想要的,但您可以倾斜整个文本容器以适应使用 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;
}
关于javascript - 如何在 javascript 中将字符串分成 x 等行(文本对齐),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12708404/