html文本溢出中间出现省略,javascript – 如何在文本中间显示文本溢出省略号

一种方法如下,但这当然 – 依赖于JavaScript：

function centralEllipsis(opts) {

// the default settings, which can be overridden

// by the user:

var settings = {

// the number of the original characters to show:

'maxLength': 7,

// the character-sequence, or HTML character-

// entity to use to replace the missing characters:

'ellipsis': '…',

// the attribute to which you'd like to write the

// original text (this function does also write

// the text to the 'title' attribute though):

'writeToAttribute': 'data-originaltext'

},

// the element upon which we're working (cached

// because we'll access it more than once):

_this = this;

// iterating over the properties supplied by the user:

for (var prop in opts) {

// if the current property ('prop') of the object

// ('opts') is enumerable and not from the prototype:

if (opts.hasOwnProperty(prop)) {

// we update that property in the settings object

// (if the typeof the property-value ('opts[prop]')

// is not equal to the string 'undefined', if it is

// then we use the original property-value:

settings[prop] = 'undefined' !== typeof opts[prop] ? opts[prop] : settings[prop];

}

}

// we divide the settings.maxLength by 2 to work out

// how many characters should appear at the beginning

// of the string; using Math.ceil() to ensure whole

// numbers:

var prefixLength = Math.ceil(settings.maxLength / 2),

// finding the length of the suffix by subtraction

// of the prefixLength from the settings.maxLength:

suffixLength = settings.maxLength - prefixLength,

// setting the textContent of the current element

// as the element's title text and storing it in

// a variable:

originalText = _this.title = _this.textContent,

// empty variables initialised for later:

prefix, suffix;

// if the maxLength is less than the length of the original

// text, then we go ahead (if not, we do nothing):

if (settings.maxLength < originalText.length) {

// storing the original text in the specified attribute:

_this.setAttribute(settings.writeToAttribute, originalText);

// the prefix is the substring of the originalText, for

// settings.maxLength number of characters starting at

// index 0 (the beginning of the string):

prefix = originalText.substr(0, prefixLength);

// if settings.maxLength is less than 2 then the

// suffix is an empty string (''), otherwise it's

// a substring of the originalText, using a negative

// index which takes the last 'suffixLength'

// characters from the string:

suffix = settings.maxLength < 2 ? '' : originalText.substr(-suffixLength);

// here we set the innerHTML (so that we can use HTML

// character-entities, such as '…') to the

// prefix + the settings.ellipsis character(s) + the suffix:

_this.innerHTML = prefix + settings.ellipsis + suffix;

}

}

// Using Function.prototype.call() to use Array.prototype.forEach()

// on the array-like NodeList returned by document.querySelectorAll():

Array.prototype.forEach.call(document.querySelectorAll('.midEllipsis'), function (el) {

// the first argument (here: 'el') supplied to the function

// is the array-element (here a DOM node from the NodeList)

// from the array (NodeList) over which we're iterating.

// using Function.prototype.apply() in order to specify

// that 'this' in the function (centralEllipsis) will be

// the supplied DOM node ('el'); the array is used to

// pass the arguments to the function, the empty object

// is what will be the 'opts' variable in the function

// called. It doesn't have to be there, it's simply left

// in place to show how to pass arguments to the function,

// and how to supply user-defined options to override the

// the defaults:

centralEllipsis.apply(el, [{}]);

});

function centralEllipsis(opts) {

var settings = {

'maxLength': 7,

'ellipsis': '…',

'writeToAttribute': 'data-originaltext'

},

_this = this;

for (var prop in opts) {

if (opts.hasOwnProperty(prop)) {

settings[prop] = 'undefined' !== typeof opts[prop] ? opts[prop] : settings[prop];

}

}

var prefixLength = Math.ceil(settings.maxLength / 2),

suffixLength = settings.maxLength - prefixLength,

originalText = _this.title = _this.textContent,

prefix, suffix;

if (settings.maxLength < originalText.length) {

_this.setAttribute(settings.writeToAttribute, originalText);

prefix = originalText.substr(0, prefixLength);

suffix = settings.maxLength < 2 ? '' : originalText.substr(-suffixLength);

_this.innerHTML = prefix + settings.ellipsis + suffix;

}

}

Array.prototype.forEach.call(document.querySelectorAll('.midEllipsis'), function(el) {

centralEllipsis.apply(el, [{}]);

});

• abcdefghijklm

要覆盖默认设置,例如将maxLength设置为4：

Array.prototype.forEach.call(document.querySelectorAll('.midEllipsis'), function(el) {

centralEllipsis.apply(el, [{

'maxLength': 4

}]);

});

function centralEllipsis(opts) {

var settings = {

'maxLength': 7,

'ellipsis': '…',

'writeToAttribute': 'data-originaltext'

},

_this = this;

for (var prop in opts) {

if (opts.hasOwnProperty(prop)) {

settings[prop] = 'undefined' !== typeof opts[prop] ? opts[prop] : settings[prop];

}

}

var prefixLength = Math.ceil(settings.maxLength / 2),

suffixLength = settings.maxLength - prefixLength,

originalText = _this.title = _this.textContent,

prefix, suffix;

if (settings.maxLength < originalText.length) {

_this.setAttribute(settings.writeToAttribute, originalText);

prefix = originalText.substr(0, prefixLength);

suffix = settings.maxLength < 2 ? '' : originalText.substr(-suffixLength);

_this.innerHTML = prefix + settings.ellipsis + suffix;

}

}

Array.prototype.forEach.call(document.querySelectorAll('.midEllipsis'), function(el) {

centralEllipsis.apply(el, [{

'maxLength': 4

}]);

});

• abcdefghijklm

或者将“省略号”字符设置为“»”字符(例如)：

Array.prototype.forEach.call(document.querySelectorAll('.midEllipsis'), function(el) {

centralEllipsis.apply(el, [{

'ellipsis': '»'

}]);

});

function centralEllipsis(opts) {

var settings = {

'maxLength': 7,

'ellipsis': '…',

'writeToAttribute': 'data-originaltext'

},

_this = this;

for (var prop in opts) {

if (opts.hasOwnProperty(prop)) {

settings[prop] = 'undefined' !== typeof opts[prop] ? opts[prop] : settings[prop];

}

}

var prefixLength = Math.ceil(settings.maxLength / 2),

suffixLength = settings.maxLength - prefixLength,

originalText = _this.title = _this.textContent,

prefix, suffix;

if (settings.maxLength < originalText.length) {

_this.setAttribute(settings.writeToAttribute, originalText);

prefix = originalText.substr(0, prefixLength);

suffix = settings.maxLength < 2 ? '' : originalText.substr(-suffixLength);

_this.innerHTML = prefix + settings.ellipsis + suffix;

}

}

Array.prototype.forEach.call(document.querySelectorAll('.midEllipsis'), function(el) {

centralEllipsis.apply(el, [{

'ellipsis': '»'

}]);

});

• abcdefghijklm

参考文献：