javascript 如何裁剪超过元素长度的字符串？

How to crop a string which is exceeding the element length?

提问by Abdullah Jibaly

In my html page I have tooltip. Some strings are not fitting correctly because of their length in the Tooltip image. But, I'mm not allowed to crop the string from server side.

在我的 html 页面中，我有工具提示。某些字符串由于它们在工具提示图像中的长度而无法正确拟合。但是，我不允许从服务器端裁剪字符串。

I want to make the ToolTip to show first 8-12 chars and followed by dots.

我想让工具提示显示前 8-12 个字符，然后是点。

Is there any inbuilt function available for it in javascript or jquery.

在 javascript 或 jquery 中是否有任何可用的内置函数。

Thanks!

谢谢！

回答by zsalzbank

You can use string.substring(from, to): http://www.w3schools.com/jsref/jsref_substring.asp

您可以使用string.substring(from, to)：http: //www.w3schools.com/jsref/jsref_substring.asp

Then just append "..."

然后只需附加 "..."

var x = "a really long line of text";
var toolTipText = x.substring(0, 8) + "...";

回答by Abdullah Jibaly

tip = tip.length > 12 ? tip.substring(0,12) + "..." : tip;

回答by Chandu

I would use a regular expression as given below since I need not care for the string length and manipulation:

我将使用下面给出的正则表达式，因为我不需要关心字符串长度和操作：

var regExp = /(.{8})(.*)/;
<YOUR_INPUT_STRING>.replace(regExp, "...");
 //e.g. "It is a very big string I donno why it is so big.".replace(regExp, "...");

回答by alegscogs

Some of the answers listed here (like using CSS3's text-overflow:ellipsis rule) are great if you just want to truncate a string, but they don't provide you with the ability to implement arbitrary logic like breaking on a whitespace or a hyphen. Javascript provides that ability natively with the String#replace function. Combined with regular expressions, this can support an amazingly powerful set of excerpting rules. Here's how it works:

如果您只想截断一个字符串，此处列出的一些答案（例如使用 CSS3 的 text-overflow:ellipsis 规则）非常有用，但它们并没有为您提供实现任意逻辑的能力，例如在空格或连字符上打断. Javascript 通过 String#replace 函数原生提供了这种能力。结合正则表达式，这可以支持一组非常强大的摘录规则。这是它的工作原理：

String#replace can take a function as its second parameter and handily passes in any regexp match and groupings as arguments, using the return value of the function to replace any match from the regexp.

String#replace 可以将一个函数作为它的第二个参数，并轻松地将任何正则表达式匹配和分组作为参数传递，使用函数的返回值替换正则表达式中的任何匹配。

Here's an example that will truncate and add an ellipsis to a string longer than 8 characters, but does nothing if the string is already shorter than that:

下面是一个示例，它将截断长度超过 8 个字符的字符串并添加一个省略号，但如果字符串已经短于该字符串，则不执行任何操作：

function replace_second_group_with_an_ellipsis(){
    return arguments[1] + (arguments[2] ? '...' : '');
}

toolTipString.replace(/(^.{0,8})(.*)/, replace_second_group_with_an_ellipsis);

The function passed as the second parameter to replace()will have an argumentsobject with the whole regexp match as its first value, and any further matching groups that you identified with parentheses in your regexp.

作为第二个参数传递给的函数replace()将有一个arguments对象，该对象将整个正则表达式匹配作为其第一个值，以及您在正则表达式中用括号标识的任何进一步匹配组。

Of course, you can use any logic you like for replacement. It might be nice to try to find the last whitespace to break on. Unfortunately, there's no backreference in javascript regular expressions. In this case, we could handle the backreference logic manually with a loop in our callback:

当然，您可以使用任何您喜欢的逻辑进行替换。尝试找到要打破的最后一个空格可能会很好。不幸的是，javascript 正则表达式中没有反向引用。在这种情况下，我们可以在回调中使用循环手动处理反向引用逻辑：

function shorten_nicely_with_ellipsis(){
    var str = arguments[1];
    var truncating = !!arguments[2];

    // If we're not already breaking on a whitespace character, loop
    // backwards over the string, and break on the first character of
    // the first group of whitespace characters we find. 
    if( truncating && !arguments[2].match(/^\s/) ) {
        for(var i=str.length; --i; i<=1) {
            if( str[i].match(/\s/) && !str[i-1].match(/\s/) ) {
                str = arguments[1].substr(0, i);
                break;
            }
        }
    }

    if( truncating ) {                
        str = str + '...';
    }

    return str;
}


toolTipString.replace(/(^.{0,8})(.*)/, shorten_nicely_with_ellipsis);

回答by Malvolio

Not actually JavaScript (and not universally available), but the CSS text-overflow: ellipsiswill do what you want.

实际上不是 JavaScript（也不是普遍可用），但 CSStext-overflow: ellipsis会做你想做的。

回答by keithjgrant

CSS3 introduces text-overflow: ellipsis, which is exactly what you're looking for. Hereis an article on it, including how to make it work in firefox, which doesn't support the property yet.

CSS3 引入了text-overflow: ellipsis，这正是您要寻找的。 这是一篇关于它的文章，包括如何使它在不支持该属性的 Firefox 中工作。