Javascript 限制网页上字符串的显示长度

我正在寻找一种技术（javascript、CSS，随便什么？），它可以让我控制显示的字符串的数量。字符串是搜索的结果（因此最初不知道）。简单的字符计数方法虽然微不足道，但不可接受，因为它需要处理比例字体。换句话说，如果我想限制为70像素，那么下面的示例显示了不同的字符计数（9和15），两者测量相同：-

欢迎M.
嗨，伊恩，如果我

如果你查看雅虎的搜索结果，他们可以限制标题字符串的长度，并在长字符串的末尾添加省略号以表示更多内容。 （试试网站：loot.com wireless+键盘+鼠标，看看雅虎实现这一目标的例子）

---

有什么想法吗？

可能是CSS属性

溢出：隐藏

可以帮助您，与

宽度

一起使用固定宽度的跨距，溢出-x:隐藏和空白：nowrap将是一个开始

---

在跨浏览器场景中获取省略号将很困难。IE有文本溢出：省略，但这是非标准的。Opera中的-o-text-overflow模拟了这一点。然而，mozilla没有这个功能。yahoo Javascript API处理此问题。

yahoo在服务器端执行此操作，截断和省略号（“…”）在HTML中返回。大概这是在字符计数的基础上完成的，如果这不是您的选项，那么服务器端就不可用了

除了溢出：隐藏之外，我不确定CSS是否能在这里帮助您。您可以使用Javascript测量包含元素的宽度，并基于此截断文本。这可以与

overflow:hidden结合使用

这样文本元素就不会突然调整大小，但您可能需要提取文本并在页面某处添加临时元素来进行测量。根据要截断的元素数量，这可能不会很好地工作

另一个略显粗糙的选项是测量包含字母“

W

”的元素的宽度，然后进行字符计数并在

（char\u count*width\u of W）>所需的宽度时截断

您可以使用
文本换行：无
要停止文本换行，尽管这是CSS3属性，我上次检查时只支持IE（想象一下，当我发现一个新属性时，我感到震惊！）。
对于跨浏览器纯CSS解决方案，请查看Hedger Wang的文本溢出：省略号原型，如下所示：


在CSS中：。类名{
宽度：5em；
空白：nowrap；
文本溢出：省略号；}

希望它能帮助你

谢谢-很好的开始！样式：隐藏；宽度：100px；高度：1.2em'成功处理长度限制（必须添加高度才能停止缠绕）。唯一的缺点是我想不出是否有溢出，因此我不知道是否要添加省略号，而不是应用高度-因为我们都知道这不好玩。。。尝试使用空白：nowrap CSS属性。这将迫使所有行保持在一行：我认为您需要溢出-x:hidden。或者直接使用溢出：隐藏以确保安全。哦，你是对的，输入错误溢出-y在跨度上没有意义，将进行编辑。可能重复