2

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

欢迎 M...
嗨 Iain 如果我...

如果您查看 Yahoo 搜索结果,他们能够限制标题字符串的长度并在长字符串的末尾添加省略号以表示更多。(尝试站点:loot.com 无线+键盘+和+鼠标查看雅虎实现此功能的示例)

有任何想法吗?

4

5 回答 5

2

也许 CSS 属性overflow: hidden;可以帮助你,结合width.

于 2008-10-12T12:16:07.467 回答
1

使用固定宽度的跨度,overflow-x:hidden 和 white-space:nowrap 将是一个开始。

在跨浏览器场景中获取省略号将很困难。IE 有 text-overflow:elipsis 但这是非标准的。这在 Opera 中使用 -o-text-overflow 进行了模拟。然而Mozilla没有这个。雅虎 Javascript API 处理这个问题。

于 2008-10-12T12:32:44.377 回答
0

Yahoo 在服务器端执行此操作,在 HTML 中返回截断和省略号('...')。大概这是在字符数上完成的,如果那不是您的选择,那么服务器端就出局了。

除了overflow: hidden我不确定 CSS 是否可以在这里为您提供帮助之外。您可以使用 Javascript 测量包含元素的宽度,并据此截断文本。这可以结合使用,overflow:hidden;因此文本元素不会突然调整大小,但您可能必须提取文本并将临时元素添加到页面某处以进行测量。根据要截断的元素数量,这可能效果不佳。

另一个稍微有点 hacky 的选项是测量包含字母 ' W' 的元素的宽度,然后进行字符计数并截断 if (char_count * width_of_w) > desired_width

您可以使用text-wrap: none;停止文本换行到新行,虽然这是一个 CSS3 属性并且我上次检查的只有 IE 支持(想象一下当我发现它时我的震惊!)。

于 2008-10-12T12:35:08.880 回答
0

对于跨浏览器的纯 CSS 解决方案,请查看 Hedger Wang 的 text-overflow:ellipsis 原型,这里:

http://www.hedgerwow.com/360/dhtml/text_overflow/demo2.php

于 2008-10-20T04:09:10.223 回答
0

在 CSS 中:.class-name{ 宽度:5em; 空白:nowrap;文本溢出:省略号;}

希望它可以帮助你。

于 2015-01-22T10:36:08.937 回答