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将在右侧有未使用的空格。

例如：

“iiiiiiiiii.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太过苛刻，那么您可以坚持使用纯CSS，并且只会隐藏溢出的文本。尝试在FF中查看quirksmode页面，你会看到。

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

考虑用于截断文本的HTML DIV的长度

1 个答案: