我使用固定宽度的剑道网格.如果文本更多,则显示省略号.但我可以根据字符串的结尾来区分行.由于这种影响我无法找到它.所以,我需要在文本中间省略.
例：
abcdefghijklm
abcdefg... -> Normal Ellipse
abcd...klm -> I Want need this type of output
最佳答案
一种方法如下,但这当然 – 依赖于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,[{}]);
});外部JS Fiddle demo,用于实验.
要覆盖默认设置,例如将maxLength设置为4：
Array.prototype.forEach.call(document.querySelectorAll('.midEllipsis'),[{
'maxLength': 4
}]);
});
function centralEllipsis(opts) {
var settings = {
'maxLength': 7,[{
'maxLength': 4
}]);
});外部JS Fiddle demo,用于实验.
或者将“省略号”字符设置为“»”字符(例如)：
Array.prototype.forEach.call(document.querySelectorAll('.midEllipsis'),[{
'ellipsis': '»'
}]);
});
function centralEllipsis(opts) {
var settings = {
'maxLength': 7,[{
'ellipsis': '»'
}]);
});外部JS Fiddle demo,用于实验.
参考文献：
> Array.prototype.forEach().
> Conditional (Ternary) operator.
> document.querySelectorAll().
> Element.innerHTML.
> Element.setAttribute()
> Function.prototype.apply()
> Function.prototype.call()
> Node.textContent
> String.prototype.substr()
> typeof operator
