如何在文本中间显示文本溢出省略号
How to show text overflow ellipsis in the middle of the text
我使用固定宽度的剑道网格。如果文本更多,则显示省略号。但是我可以根据字符串的末尾区分行。由于这种影响,我找不到它。所以,我需要文本中间的省略号。
例:
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, [{}]);
});
<ul>
<li class="midEllipsis">abcdefghijklm</li>
</ul>
外部 JS 小提琴演示,用于实验。
要覆盖默认设置,例如将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
}]);
});
<ul>
<li class="midEllipsis">abcdefghijklm</li>
</ul>
外部 JS 小提琴演示,用于实验。
或者要将'ellipsis'
字符设置为"»"字符(例如):
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': '»'
}]);
});
<ul>
<li class="midEllipsis">abcdefghijklm</li>
</ul>
外部 JS 小提琴演示,用于实验。
引用:
-
Array.prototype.forEach()
. - 条件(三元)运算符。
-
document.querySelectorAll()
. -
Element.innerHTML
. -
Element.setAttribute()
. -
Function.prototype.apply()
. -
Function.prototype.call()
. -
Node.textContent
. -
String.prototype.substr()
. -
typeof
运算符。
您添加了 css 和 javascript 标签,因此我想到了一种暗示两种语言的解决方法。
您可以尝试下一个解决方法:
1.减去除最后三个字符以外的所有字符variable_a。减去variable_b最后三个字符。
2. 将variable_a扔进一个应用省略号的跨度中。
3.在第一个跨度之后立即添加另一个不带省略号的跨度,并用最后三个字符填充它(variable_b)
相关文章:
- 高图表的文本溢出问题
- 如何检查浏览器中是否支持文本溢出:省略号
- 当屏幕大小为中或小或xs时,文本溢出,会弄乱整个表.不过,它在全屏模式下运行良好
- 在移动设备领域,空白:nowrap;溢出:隐藏;文本溢出:省略号;有点不起作用
- 我的拉斐尔“文本溢出:省略号”实现插件是矫枉过正吗?
- 检测文本溢出:省略号在输入字段上是否处于活动状态
- 文本溢出省略号在Windows(IE 10)中不起作用
- 左侧的文本溢出省略号
- 我如何在具有“拖动”的文本上实现水平滚动功能;文本溢出:省略号;没有滚动条
- jQueryflot-适合可变范围图表的时间轴刻度标签,没有文本溢出
- 当页眉有文本溢出省略号时,在页眉内的右侧浮动文本
- 使用Javascript查找文本溢出的位置
- 没有"white-space: nowrap"的文本溢出省略符
- 文本溢出:Internet explorer中的省略号问题
- 如何使文本溢出省略号在多行文本上工作
- HTML文本溢出省略号检测
- 如何将我的文本溢出转换为列
- 如何在应用文本溢出属性时获取结果文本
- 文本溢出:省略号不;无法正确选择HTML
- 如何检测文本溢出/包装Kinetic.text