Question

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

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

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

谢谢！

Answer 1

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

然后只需附加"..."

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

Answer 2

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

Answer 3

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

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

Answer 4

这里列出的一些答案（比如使用CSS3的文本溢出：省略号规则）非常棒，如果你只想截断一个字符串，但是它们不能提供实现任意逻辑的能力，比如打破空格或连字符。 Javascript本身提供了String＃replace函数。结合正则表达式，这可以支持一组非常强大的摘录规则。以下是它的工作原理：

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

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

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

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

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

当然，您可以使用任何您喜欢的逻辑进行更换。尝试找到要打破的最后一个空格可能会很好。不幸的是，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);

Answer 5

实际上并不是JavaScript（并且不是普遍可用的），但CSS text-overflow: ellipsis会做你想要的。

Answer 6

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

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

6 个答案: