<分区>
我需要一种方法来 chop 移动应用程序中间的字符串。该字符串的末尾有重要信息,我总是希望这些信息可见。我一直无法找到一个 CSS 方法来在字符串的中间执行此操作,只是在开头或结尾。
我正在研究一种在 JS 中执行此操作的方法,但我认为这已经得到解决,我不想重新发明轮子。我认为成为问题的是我需要它根据屏幕尺寸动态变化。我不能简单地说如果 string.length > 100
然后 chop 。我需要查看适合的内容,然后进行 chop ,并让它监听大小的变化,例如方向发生变化。
标签 javascript css
<分区>
我需要一种方法来 chop 移动应用程序中间的字符串。该字符串的末尾有重要信息,我总是希望这些信息可见。我一直无法找到一个 CSS 方法来在字符串的中间执行此操作,只是在开头或结尾。
我正在研究一种在 JS 中执行此操作的方法,但我认为这已经得到解决,我不想重新发明轮子。我认为成为问题的是我需要它根据屏幕尺寸动态变化。我不能简单地说如果 string.length > 100
然后 chop 。我需要查看适合的内容,然后进行 chop ,并让它监听大小的变化,例如方向发生变化。
最佳答案
有了css,你可以很容易地使用省略号,但只能在文本的末尾。
但是,有一个名为dotdotdot
的jQuery 插件 可以做到这一点。
这是它的页面:DotDotDot
他们的一个演示示例展示了如何将长 URL 变成
www.website.com/that/should/.../file.html
我花了一些时间试图让它正常工作,它仍然不是很完美,但工作得很好。
// @param element obtained with $("selector")
// @param spacer ' ' for text, or '/' for links.
// @param position number of words to leave at end
function doEllipsis(element, spacer, position) {
$(element).data('ell-orig', $(element).html());
$(element).data('ell-spacer', spacer);
$(element).data('ell-pos', position);
var pieces = $(element).html().split(spacer);
if (pieces.length > 1) {
var building = "";
var i = 0;
// for "position" to mean "fraction where to wrap" (eg. 0.6), use this:
// for (; i < pieces.length*position; i++) {
for (; i < pieces.length-position; i++) {
building += pieces[i] + spacer;
}
building += '<span class="ell">';
for (; i < pieces.length; i++) {
building += pieces[i] + spacer;
}
building += '</span>';
$(element).html(building);
$(element).dotdotdot({
after: 'span.ell',
wrap: 'letter'
});
}
}
// use to redraw after the size changes etc.
function updateEllipsis(element) {
var orig = $(element).data('ell-orig');
var spacer = $(element).data('ell-spacer');
var pos = $(element).data('ell-pos');
$(element).trigger("destroy");
$(element).empty();
$(element).html(orig);
doEllipsis(element, spacer, pos);
}
这是一个 fiddle此示例的一部分(它使用托管在我的保管箱上的副本,因此可以肯定它不会永远有效)。
它是响应式的(无论如何,在某种程度上),并将省略号准确地放在你告诉它的地方。
关于javascript - 有没有办法使用 CSS 或 JS chop 中间的字符串?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18088779/