html元素的最大字符串长度答案

【问题标题】：Max string length of html elementhtml元素的最大字符串长度
【发布时间】：2013-05-25 17:55:43
【问题描述】：

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

它们应该是这样的：

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

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

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

【问题讨论】：

标签： javascript jquery html string-length

【解决方案1】：

在 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));

Working Example

【讨论】：

虽然这可行，但您需要注意不要在 HTML 元素的中间截断，否则您可能会完全搞砸页面的布局。
我已经选择了 CSS 选项。感谢 Kevin 的输入以及对 substring 方法的见解。

【解决方案2】：

我会使用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);

【讨论】：

【解决方案3】：

您可以简单地使用 CSS 来执行此操作，而无需在 JS 或 jQuery 中进行任何计算。

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

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

希望有帮助

【讨论】：

我想这就是我所需要的！谢谢！
火狐还支持这个吗？
浏览器对此的支持是什么？
Firefox 中的省略号一直是个问题。
就Mozilla的发布版本而言，在版本7（2011年发布）之后，它们支持省略号。虽然没有测试过。当前版本是 21。