Text Overflow

by Justin Chen

HTML

<div id="box" class="box">测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度</div>
<br />
<button>white-space-nowrap</button> 
<button>word-break-keep-all</button> 
<button>overflow-hidden</button> 
<button>text-overflow-ellipsis</button>
<h3>启用的 Classes:</h3>
<p id="info"></p>

CSS

.box{line-height:22px; height:22px; width:200px; overflow:auto; border:1px solid #ccc; margin:10px;}
.white-space-nowrap{white-space:nowrap;}
.word-break-keep-all{word-break:keep-all;}
.overflow-hidden{overflow:hidden;}
.text-overflow-ellipsis{text-overflow:ellipsis;}

JavaScript

jQuery(function($){
    var info = $('#info'), box = $('#box'),
        showInfo = function(){
            info.html(box[0].className);
        };
    showInfo();
    $('button').click(function(){
        var cls = $(this).text();
        box.toggleClass(cls);
        showInfo();
    });
});