java纯文本的单行区域_文本超出---单行省略和多行省略

在实际的项目中，由于文字内容的长度不确定性和页面布局的固定性，难免会出现文字内容超过div区域的情况，此时比较好的做法就是当文字超过限定的div宽度后自动以省略号(…)显示，这样，按照习惯，人们都会知道这儿有文字被省略了。省略又分为单行省略和多行省略。我们常用的是单行省略代码如下：

html代码：

这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话

这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话

这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话

这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话

css代码：

.text1{

width: 300px;

height: 25px;

line-height: 25px;

background-color: #ccc;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

.text2{

width: 300px;

height: 100px;

background-color: orange;

}

效果：

那多行省略怎么做呢：

我找了一个jquery.dotdotdot.min.js插件，然后将超出文本的地方引用下面的js即可

$(function(){

$('.text2').dotdotdot();

})

效果：

现贴上jquery.dotdotdot.min.js的js代码：

/*

*jQuery dotdotdot 1.8.3

*

*Copyright (c) Fred Heusschen

*www.frebsite.nl

*

*Plugin website:

*dotdotdot.frebsite.nl

*

*Licensed under the MIT license.

*http://en.wikipedia.org/wiki/MIT_License

*/

!function(t,e){"use strict";function n(t,e,n){var r=t.children(),a=!1;t.empty();for(var i=0,d=r.length;iC?c=u(x.contents().eq(-1-C),n):(c=u(x,n,!0),C||x.detach()),c&&(h=i(s(c),a),l(c,h),C&&d)){var T=d.parent();t(c).parent().append(d),t.trim(T.html())||T.remove()}}else h=i(g.slice(0,v+1).join(p),a),l(c,h)}return!0}function o(t,e){return t.innerHeight()>e.maxHeight||e.maxLength&&t.text().trim().length>e.maxLength}function i(e,n){for(;t.inArray(e.slice(-1),n.lastCharacter.remove)>-1;)e=e.slice(0,-1);return t.inArray(e.slice(-1),n.lastCharacter.noEllipsis)<0&&(e+=n.ellipsis),e}function d(t){return{width:t.innerWidth(),height:t.innerHeight()}}function l(t,e){t.innerText?t.innerText=e:t.nodeValue?t.nodeValue=e:t.textContent&&(t.textContent=e)}function s(t){return t.innerText?t.innerText:t.nodeValue?t.nodeValue:t.textContent?t.textContent:""}function c(t){do t=t.previousSibling;while(t&&1!==t.nodeType&&3!==t.nodeType);return t}function u(e,n,r){var a,o=e&&e[0];if(o){if(!r){if(3===o.nodeType)return o;if(t.trim(e.text()))return u(e.contents().last(),n)}for(a=c(o);!a;){if(e=e.parent(),e.is(n)||!e.length)return!1;a=c(e[0])}if(a)return u(t(a),n)}return!1}function h(e,n){return!!e&&("string"==typeof e?(e=t(e,n),!!e.length&&e):!!e.jquery&&e)}function f(t){for(var e=t.innerHeight(),n=["paddingTop","paddingBottom"],r=0,a=n.length;r1)return this.each(function(){t(this).dotdotdot(e)});var a=this,i=a.contents();a.data("dotdotdot")&&a.trigger("destroy.dot"),a.data("dotdotdot-style",a.attr("style")||""),a.css("word-wrap","break-word"),"nowrap"===a.css("white-space")&&a.css("white-space","normal"),a.bind_events=function(){return a.bind("update.dot",function(e,d){switch(a.removeClass("is-truncated"),e.preventDefault(),e.stopPropagation(),typeof l.height){case"number":l.maxHeight=l.height;break;case"function":l.maxHeight=l.height.call(a[0]);break;default:l.maxHeight=f(a)}l.maxHeight+=l.tolerance,"undefined"!=typeof d&&(("string"==typeof d||"nodeType"in d&&1===d.nodeType)&&(d=t("
").end().css({height:"auto",width:"auto",border:"none",padding:0,margin:0});var c=!1,u=!1;return s.afterElement&&(c=s.afterElement.clone(!0),c.show(),s.afterElement.detach()),o(g,l)&&(u="children"==l.wrap?n(g,l,c):r(g,a,g,l,c)),g.replaceWith(g.contents()),g=null,t.isFunction(l.callback)&&l.callback.call(a[0],u,i),s.isTruncated=u,u}).bind("isTruncated.dot",function(t,e){return t.preventDefault(),t.stopPropagation(),"function"==typeof e&&e.call(a[0],s.isTruncated),s.isTruncated}).bind("originalContent.dot",function(t,e){return t.preventDefault(),t.stopPropagation(),"function"==typeof e&&e.call(a[0],i),i}).bind("destroy.dot",function(t){t.preventDefault(),t.stopPropagation(),a.unwatch().unbind_events().contents().detach().end().append(i).attr("style",a.data("dotdotdot-style")||"").removeClass("is-truncated").data("dotdotdot",!1)}),a},a.unbind_events=function(){return a.unbind(".dot"),a},a.watch=function(){if(a.unwatch(),"window"==l.watch){var e=t(window),n=e.width(),r=e.height();e.bind("resize.dot"+s.dotId,function(){n==e.width()&&r==e.height()&&l.windowResizeFix||(n=e.width(),r=e.height(),u&&clearInterval(u),u=setTimeout(function(){a.trigger("update.dot")},100))})}else c=d(a),u=setInterval(function(){if(a.is(":visible")){var t=d(a);c.width==t.width&&c.height==t.height||(a.trigger("update.dot"),c=t)}},500);return a},a.unwatch=function(){return t(window).unbind("resize.dot"+s.dotId),u&&clearInterval(u),a};var l=t.extend(!0,{},t.fn.dotdotdot.defaults,e),s={},c={},u=null,g=null;return l.lastCharacter.remove instanceof Array||(l.lastCharacter.remove=t.fn.dotdotdot.defaultArrays.lastCharacter.remove),l.lastCharacter.noEllipsis instanceof Array||(l.lastCharacter.noEllipsis=t.fn.dotdotdot.defaultArrays.lastCharacter.noEllipsis),s.afterElement=h(l.after,a),s.isTruncated=!1,s.dotId=p++,a.data("dotdotdot",!0).bind_events().trigger("update.dot"),l.watch&&a.watch(),a},t.fn.dotdotdot.defaults={ellipsis:"... ",wrap:"word",fallbackToLetter:!0,lastCharacter:{},tolerance:0,callback:null,after:null,height:null,watch:!1,windowResizeFix:!0,maxLength:null},t.fn.dotdotdot.defaultArrays={lastCharacter:{remove:[" ","　",",",";",".","!","?"],noEllipsis:[]}},t.fn.dotdotdot.debug=function(t){};var p=1,g=t.fn.html;t.fn.html=function(n){return n!=e&&!t.isFunction(n)&&this.data("dotdotdot")?this.trigger("update",[n]):g.apply(this,arguments)};var v=t.fn.text;t.fn.text=function(n){return n!=e&&!t.isFunction(n)&&this.data("dotdotdot")?(n=t("