Mutiline-Text-Styling

利用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">
Lettering.js, a jQuery plugin for radical Web Typography. Visit us on GitHub: https://github.com/davatron5000/Lettering.js当你分享的宝贝、图片、日记 Blog等有人评论，或者是有人回复了你的评论，都会通过消息或Email告诉你</div>

CSS

.test-text {
	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:20px;
	color:#333;
}
.test-text .break-point-2 ~ span{
	color:#036;
	font-size:30px;
}
.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 ChineseReg = /[^\x00-\xff]{2}/;
	var lineCount = 0;
	
	//If Chinese charactor exists, try to fix
	if(ChineseReg.test(Dom.text())){
		var tempText = Dom.text().replace(/([^\x00-\xff]+)/g," $1 ").replace(/\s{2,}/g," ").replace(/^\s+|\s+$/,"");//Make Chinese Charactors seperated from Latin's, trim white space
		//tempText = tempText.replace(/\s{2}/g," ");//Trim Double white space
		Dom.text(tempText);
	}
	//console.log(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();
        
        //Escape the operation from the event-flow
        //setTimeout(function(){
            //If Chinese charactor exists in the span, lettering one more time
            if(ChineseReg.test($this.text())){
                $this.lettering();               
                if($this.width()>$this.parent().width()){
                    $this.width($this.parent().width()).attr("break-ignore","true");
                    $this.children("span").addClass("char").each(
                        function(){
                            var $thisChar = $(this), nextChar = $thisChar.next();
                            if(nextChar.length!=0){
                                if(Math.abs(nextChar.offset().top - $thisChar.offset().top) > 5 ){
                                    $thisChar.addClass("break-point-"+(++lineCount));	
                                }	
                            }
                            
                        }
                    );
                }
            }
            if(next.length!=0){
                if(Math.abs(next.offset().top - $this.offset().top) > 5 ){
                    
                    $this.attr("break-ignore") || $this.addClass("break-point-"+(++lineCount)).after("<br />");	
                }	
            }
       // },12);
	});
});