javascript - html元素的最大字符串长度

Question

我有一些推文被拉到我的网站上，每条推文的长度都不同，但我想确保它们一直显示在一行上。

它们应该是这样出现的：

然而，如果 twitter 的长度超过了这么多的单词，它就会掉到下一行并与设计混淆。

我的问题是给出这个字符串还是 div？（请原谅我的理解不佳）最大长度？然后，如果我们达到最大字符串长度，可能会在字符串末尾添加省略号 (...)。

我脑海中的想法是，如果#div > 120 然后将字符串缩短为 120 并添加 (...)。有人可以帮我实现吗？不确定 javascript/jQuery 是否适合这里？谢谢！

Answer 1

您可以简单地使用 CSS 来做到这一点，而无需在 JS 或 jQuery 中进行任何计算。

为要显示推文的 div 元素定义一个固定宽度，并将 css 类 Ellipsis 应用于该元素：

.Ellipsis
{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

希望有帮助

Answer 2

在 Javascript 中，您可以使用该substring方法。

var value = "This is a very long tweet.  This is a very long tweet.  This is a very long tweet.  This is a very long tweet.  This is a very long tweet.  This is a very long tweet.  This is a very long tweet.  This is a very long tweet.  This is a very long tweet.  This is a very long tweet.  This is a very long tweet.  This is a very long tweet.  This is a very long tweet.  This is a very long tweet.  This is a very long tweet.  This is a very long tweet.  This is a very long tweet.  This is a very long tweet.  This is a very long tweet.  This is a very long tweet.  This is a very long tweet.  This is a very long tweet.  This is a very long tweet.";

function truncate(value, length){
   return value.substring(0,300);
}

alert(truncate(value,3000));

工作示例

Answer 3

我会使用以下slice()方法：

var formatted_tweet = long_tweet.slice(0, 120) + "...";

或function形式：

function trim(str, len) {
    return(str.slice(0, len) + "...");
}

var formatted_tweet = trim(long_tweet, 120);