3

我正在尝试使用本文中介绍的 text-overflow: ellipsis 技术：http: //mattsnider.com/css/css-string-truncation-with-ellipsis/ 它在浏览器中的应用范围非常广泛。

但是，我注意到的问题是，它在 Ubuntu + Chrome 11 的组合中无法正常工作，而在 Mac 上的同一个浏览器中则很好。

所以我很好奇如何发现这类问题并了解不同平台上相同浏览器之间不同行为的原因。

4

3 回答 3

2

众所周知，该text-overflow:ellipsis功能很难检测到支持。对于大多数现代浏览器功能，可以运行 Javascript 代码来检测浏览器是否支持该功能（请参阅Modernizr项目以获取最终示例），但不幸text-overflow的是，即使是最坚定的功能检测也失败了剧本作家。

因此，您只能提前找出哪些浏览器支持它，哪些不支持。

CanIUse 网站是这类事情的一个很好的参考；他们为大多数浏览器功能提供了浏览器支持表，包括text-overflow.

顺便说一句 - 您会从该链接中的表格中注意到text-overflowFirefox 目前不支持；您可能对这个问题感兴趣：text-overflow:ellipsis in Firefox 4? （和 FF5）我问是否有任何变通办法（简短的回答是，不；我们只需要等到 FF7 发布）。

但是，他们不区分支持表上的平台。假设似乎是给定浏览器在所有平台上的工作方式几乎相同。当然并非总是如此。您特别提到您在 Ubuntu 中使用 Chrome 时遇到了问题，但在其他平台上却没有。我觉得这很奇怪，因为省略号功能似乎不太可能有任何需要特定平台支持的东西，但如果是这种情况，那么它很好地证明了同一个浏览器在不同平台上可能并不总是相同的。

我没有具体的解决方案给你。我希望以上内容可能对您有用。

在这种特殊情况下，这听起来确实很奇怪——如果您可以生成一个在最新的适用于 Windows 或 Mac 的 Chrome 中但不能在 Linux 中运行的简单测试用例，那么它可能值得为 Chrome 发布错误报告。

于 2011-07-30T15:22:32.080 回答
0

如果可以，请使用 JS 框架。框架社区越大，在特定的操作系统 + 浏览器组合上出现问题的可能性就越小。

编辑：text-overflow: ellipsis这是 YUI 如何为所有浏览器标准化的示例：

http://yuilibrary.com/gallery/show/ellipsis

如果这不是一个选项，请使用虚拟机来验证您的应用程序在不同平台上的行为。

于 2011-06-10T18:14:41.367 回答
0

使用 Chrome 上的开发者工具，看看是否有 Debug 选项。我不知道 Chrome，但是 IE 可以在 IE Developer Tools 上调试它。

于 2011-06-10T18:18:13.990 回答