Mutiline-Text-Styling-for-English

利用JQuery.lettering.js实现自定义多行文本样式 - 只支持英文

by divayang

HTML

<script src="https://github.com/downloads/davatron5000/Lettering.js/jquery.lettering-0.6.1.min.js"></script>
<h1 align="center">利用JQuery.lettering.js实现自定义多行文本样式(只支持英文)</h1>
<div class="test-text" id="test">We wish you a merry Christmas and a very happy new year! Congratulations for all you guys here!</div>

CSS

.test-text {
    font-family:"Aleo Regular","Palatino Linotype",Palatino;
	width: 300px;
	margin: 0 auto;
	background: lightgray;
	color: #f52800;
	font-size: 22px;
	text-align:center;
	border-radius: 10px;
	padding: 20px;
	line-height: 1.667;
    word-wrap:break-word;   
    word-break:break-all;   
	box-shadow:inset 1px 1px 3px 1px rgba(0,0,0,.6);
	text-shadow: 0 1px 1px rgba(0,0,0,.5);
}
.test-text .word{
	display:inline-block;  
}
.test-text .break-point-1 ~ span{
	font-size:30px;
	color:#333;
}
.test-text .break-point-2 ~ span{
	color:#036;
	font-size:15px;
}
.test-text .break-point-3 ~ span{
	color:#FC0;
	font-size:22px;
}
.test-text .break-point-4 ~ span{
	color:#090;
	font-size:18px;
}
.test-text .break-point-5 ~ span{
	font-size:26px;
	color:#930;
}
.test-text .break-point-6 ~ span{
	color:#93C;
	font-size:34px;
}
.test-text .break-point-7 ~ span{
	color:#f60;
	font-size:38px;
}
.test-text .break-point-8 ~ span{
	color:#002569;
	font-size:46px;
}
.test-text .break-point-9 ~ span{
	font-size:10px;
	color:darkgreen;
}
.test-text .break-point-10 ~ span{
	color:lightblue;
	font-size:33px;
}
.test-text .break-point-11 ~ span{
	color:yellow;
	font-size:16px;
}
.test-text .break-point-12 ~ span{
	color:green;
	font-size:16px;
}
.test-text .break-point-13 ~ span{
	color:ruby;
	font-size:14px;
}
.test-text .break-point-14 ~ span{
	color:purple;
	font-size:11px;
}
.test-text .break-point-15 ~ span{
	color:pink;
	font-size:12px;
}
.test-text .break-point-16 ~ span{
	color:gray;
	font-size:16px;
}

JavaScript

$(document).ready(function(){
	var Dom = $("#test");	
	var lineCount = 0;
	var tempText = Dom.text().replace(/\s{2,}/g," ").replace(/^\s+|\s+$/,"");//Trim white space		
	Dom.text(tempText);
	
	// Apply lettering effect here to make sure it gets done
    Dom.lettering('words').children('span').addClass("word").each(function(){
		var $this = $(this), next = $this.next();       
        //setTimeout(function(){         
            if(next.length!=0){
                if(Math.abs(next.offset().top - $this.offset().top) > 5 ){
                    $this.addClass("break-point-"+(++lineCount)).after("<br />");	
                }	
            }
       // },12);
	});
});