asp.net - 考虑用于截断文本的 HTML DIV 的长度

Question

我有一个 <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> 的长度？ ？

谢谢，

亚伦

Answer 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 页面，您会看到。

---

*编辑:在测试了 jQuery ellipsis plugin 之后FireFox 的补丁，我可以确认它工作得很好，并且扩展性足够好，如果您不使用“实时调整大小”(唯一)选项。所有 26 个元素和实时选项, 调整大小让 FireFox - 在一台强大的机器上 - 屈服了。小心这个选项!这是一个很好的便利，但插件看起来并不是非常有效地编写(而且我现在没有时间修补它)。