如何仅使用css显示字符串的一部分

Question

我希望能够显示最多10个字符的字符串.如果字符串超过10个字符,我想将'...'追加到最后.

例如,如果我有字符串:

'helloworldmynameisryan'

我希望它显示如下:

'helloworld...'

我只是在这样的div中显示我的字符串:

<div>DisplayMessage</div>

是否有一个我可以创建的类,只有在字符串超过10个字符时才会应用？

Answer 1

不幸的是,没有一个很好的跨浏览器方式只使用CSS来做到这一点.'text-overflow'依赖于字符串的宽度,而不是您需要的字符串长度.

您可以在javascript中使用字符串的.length属性来实现此目的

function ellipsify (str) {
    if (str.length > 10) {
        return (str.substring(0, 10) + "...");
    }
    else {
        return str;
    }
}

希望这可以帮助.

Answer 2

Firefox实际上现在支持这一点,你只需要确保你试图'截断'的任何东西都有块级格式和宽度 - 这可能是父级.

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display:block;
    width : 100px; /* this could be defined on any parent */
}