考虑截断文本的 HTML DIV 的长度答案

【问题标题】：Accounting for the length of an HTML DIV for truncating text考虑截断文本的 HTML DIV 的长度
【发布时间】：2010-10-16 03:29:13
【问题描述】：

我有一个<div>，我正在填充一个大小不确定的文件名。如果大小超过了<div> 的长度，那么我希望它被剪掉，最后 3 个字符替换为“...”。目前我有以下内容：

<div id="fileName" class="field-row" title="<%= fileName %>">
    <% if(fileName.Length > 20) { %>
        Filename: <%= fileName.Substring(0,20) %>...
    <% } else { %>
        Filename: <%= fileName %>
    <% } %>
</div>

这很好用，但如果我有一个由 i 和 W 组成的文件名，那么 div 右侧将有未使用的空间。

例如：

“iiiiiiiii.jpg”

短于：

“WWWWWWWWWW.jpg”

...即使它们的字符数相同。

有没有更好的方法来解决<div> 的长度？

谢谢，

亚伦

【问题讨论】：

我认为这需要在客户端，以考虑到各个部分的渲染大小。你会使用 JavaScript 吗？ jQuery，MooTools..？文件名将出现在什么元素中？你能显示渲染的html吗？（浏览器中的“查看源代码”，而不是 asp.net）。
是的，我可以使用 CSS、JavaScript 和 jQuery，但对于这件小事，我认为我无法使用任何其他工具。
你可以覆盖几乎所有浏览器，除了 Firefox，根本不需要任何 JavaScript。看我的回答。
CSS 工作得很好，而且要覆盖 FireFox，jQuery 插件是最小的。

标签： asp.net html css asp.net-mvc

【解决方案1】：

由于您提到的字符宽度的差异，应该在客户端完成。

这是一种主要跨浏览器、主要是 CSS 的方式：http://www.electrictoolbox.com/ellipsis-html-css/。它不完全受支持，但这就是 JavaScript 后备的用途。* 基本上，只需使用

#fileName {
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

无需任何 JavaScript，即可支持 IE7-、Safari/Chrome、Opera、Konqueror。

http://www.quirksmode.org/css/textoverflow.html

如果你觉得用 JavaScript 仅仅支持 Firefox 太 hacky，你可以坚持使用纯 CSS，溢出的文本将被简单地隐藏。试试看 FF 中的 quirksmode 页面，你会看到的。

*编辑：在测试了 FireFox 的 jQuery ellipsis plugin 补丁后，我可以确认它运行良好，并且可以很好地扩展，如果你不使用“实时调整大小” "（唯一的）选项。 使用所有 26 个元素和实时选项，调整大小使 FireFox（在一台强大的机器上）下降到它的膝盖。小心这个选项！这很方便，但插件看起来写得不是很高效（而且我现在没有时间修补它）。

【讨论】：

这最终像一个魅力一样工作，并且下载覆盖 FireFox 的代码也很少。谢谢。
@Aaron：没问题！不过，仅作记录，您的问题是许多其他 SO 问题的重复。