我有一个具有弹性布局的网页，如果调整浏览器窗口的大小，它会改变其宽度。
在此布局中，标题 ( h2) 的长度可变（实际上是我无法控制的博客文章的标题）。目前 - 如果它们比窗口宽 - 它们被分成两行。
是否有一个优雅的、经过测试的（跨浏览器）解决方案 - 例如使用 jQuery - 缩短该标题标签的innerHTML并添加“...”如果文本太宽而无法在当前屏幕上放入一行/容器宽度？
如果内容太宽，则在 HTML 标签中插入省略号 (...)
IT技术
javascript
html
ellipsis
elasticlayout
2021-01-24 13:58:19
6个回答
以下用于在单行上截断文本的仅 CSS 解决方案适用于http://www.caniuse.com 上列出的所有浏览器，但 Firefox 6.0 除外。请注意，除非您需要支持换行多行文本或更早版本的 Firefox，否则完全不需要 JavaScript。
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
如果您需要对 Firefox 早期版本的支持，请查看我在另一个问题上的回答。
我有一个在 FF3、Safari 和 IE6+ 中使用单行和多行文本的解决方案
.ellipsis {
white-space: nowrap;
overflow: hidden;
}
.ellipsis.multiline {
white-space: normal;
}
<div class="ellipsis" style="width: 100px; border: 1px solid black;">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div class="ellipsis multiline" style="width: 100px; height: 40px; border: 1px solid black; margin-bottom: 100px">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<script type="text/javascript" src="/js/jquery.ellipsis.js"></script>
<script type="text/javascript">
$(".ellipsis").ellipsis();
</script>
jquery.省略号.js
(function($) {
$.fn.ellipsis = function()
{
return this.each(function()
{
var el = $(this);
if(el.css("overflow") == "hidden")
{
var text = el.html();
var multiline = el.hasClass('multiline');
var t = $(this.cloneNode(true))
.hide()
.css('position', 'absolute')
.css('overflow', 'visible')
.width(multiline ? el.width() : 'auto')
.height(multiline ? 'auto' : el.height())
;
el.after(t);
function height() { return t.height() > el.height(); };
function width() { return t.width() > el.width(); };
var func = multiline ? height : width;
while (text.length > 0 && func())
{
text = text.substr(0, text.length - 1);
t.html(text + "...");
}
el.html(t.html());
t.remove();
}
});
};
})(jQuery);
我使用许多其他帖子构建了此代码，并进行了以下增强：
- 它使用二进制搜索来找到恰到好处的文本长度。
- 它通过设置一次性显示事件来处理省略号元素最初被隐藏的情况，该事件在第一次显示项目时重新运行省略号代码。这对于最初未显示某些项目的主从视图或树视图非常方便。
- 它可以选择添加带有原始文本的标题属性，以实现悬停效果。
- 添加
display: block到样式中，因此跨工作 - 它使用省略号字符而不是 3 个句点。
- 它自动运行脚本以使用 .ellipsis 类
CSS：
.ellipsis {
white-space: nowrap;
overflow: hidden;
display: block;
}
.ellipsis.multiline {
white-space: normal;
}
jquery.省略号.js
(function ($) {
// this is a binary search that operates via a function
// func should return < 0 if it should search smaller values
// func should return > 0 if it should search larger values
// func should return = 0 if the exact value is found
// Note: this function handles multiple matches and will return the last match
// this returns -1 if no match is found
function binarySearch(length, func) {
var low = 0;
var high = length - 1;
var best = -1;
var mid;
while (low <= high) {
mid = ~ ~((low + high) / 2); //~~ is a fast way to convert something to an int
var result = func(mid);
if (result < 0) {
high = mid - 1;
} else if (result > 0) {
low = mid + 1;
} else {
best = mid;
low = mid + 1;
}
}
return best;
}
// setup handlers for events for show/hide
$.each(["show", "toggleClass", "addClass", "removeClass"], function () {
//get the old function, e.g. $.fn.show or $.fn.hide
var oldFn = $.fn[this];
$.fn[this] = function () {
// get the items that are currently hidden
var hidden = this.find(":hidden").add(this.filter(":hidden"));
// run the original function
var result = oldFn.apply(this, arguments);
// for all of the hidden elements that are now visible
hidden.filter(":visible").each(function () {
// trigger the show msg
$(this).triggerHandler("show");
});
return result;
};
});
// create the ellipsis function
// when addTooltip = true, add a title attribute with the original text
$.fn.ellipsis = function (addTooltip) {
return this.each(function () {
var el = $(this);
if (el.is(":visible")) {
if (el.css("overflow") === "hidden") {
var content = el.html();
var multiline = el.hasClass('multiline');
var tempElement = $(this.cloneNode(true))
.hide()
.css('position', 'absolute')
.css('overflow', 'visible')
.width(multiline ? el.width() : 'auto')
.height(multiline ? 'auto' : el.height())
;
el.after(tempElement);
var tooTallFunc = function () {
return tempElement.height() > el.height();
};
var tooWideFunc = function () {
return tempElement.width() > el.width();
};
var tooLongFunc = multiline ? tooTallFunc : tooWideFunc;
// if the element is too long...
if (tooLongFunc()) {
var tooltipText = null;
// if a tooltip was requested...
if (addTooltip) {
// trim leading/trailing whitespace
// and consolidate internal whitespace to a single space
tooltipText = $.trim(el.text()).replace(/\s\s+/g, ' ');
}
var originalContent = content;
var createContentFunc = function (i) {
content = originalContent.substr(0, i);
tempElement.html(content + "…");
};
var searchFunc = function (i) {
createContentFunc(i);
if (tooLongFunc()) {
return -1;
}
return 0;
};
var len = binarySearch(content.length - 1, searchFunc);
createContentFunc(len);
el.html(tempElement.html());
// add the tooltip if appropriate
if (tooltipText !== null) {
el.attr('title', tooltipText);
}
}
tempElement.remove();
}
}
else {
// if this isn't visible, then hook up the show event
el.one('show', function () {
$(this).ellipsis(addTooltip);
});
}
});
};
// ellipsification for items with an ellipsis
$(document).ready(function () {
$('.ellipsis').ellipsis(true);
});
} (jQuery));
以防万一你们都在 2013 年来到这里 - 这是我在这里找到的纯 css 方法：http : //css-tricks.com/snippets/css/truncate-string-with-ellipsis/
.truncate {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
它运作良好。
我的回答只支持单行文本。查看下面 gfullam 对多行分叉的评论，它看起来很有希望。
我从第一个答案中重写了几次代码，我认为这应该是最快的。
它首先找到一个“估计”的文本长度，然后添加或删除一个字符，直到宽度正确。
它使用的逻辑如下所示：
找到“估计的”文本长度后，将添加或删除字符，直到达到所需的宽度。
我确定它需要一些调整，但这是代码：
(function ($) {
$.fn.ellipsis = function () {
return this.each(function () {
var el = $(this);
if (el.css("overflow") == "hidden") {
var text = el.html().trim();
var t = $(this.cloneNode(true))
.hide()
.css('position', 'absolute')
.css('overflow', 'visible')
.width('auto')
.height(el.height())
;
el.after(t);
function width() { return t.width() > el.width(); };
if (width()) {
var myElipse = "....";
t.html(text);
var suggestedCharLength = (text.length * el.width() / t.width()) - myElipse.length;
t.html(text.substr(0, suggestedCharLength) + myElipse);
var x = 1;
if (width()) {
while (width()) {
t.html(text.substr(0, suggestedCharLength - x) + myElipse);
x++;
}
}
else {
while (!width()) {
t.html(text.substr(0, suggestedCharLength + x) + myElipse);
x++;
}
x--;
t.html(text.substr(0, suggestedCharLength + x) + myElipse);
}
el.html(t.html());
t.remove();
}
}
});
};
})(jQuery);