Question

我正在开发一个应用程序，我必须在以下结构中显示用户名：

enter image description here

在上面的结构中，在名称字段中，它可能会超出外部<div>标记的右边框，我想在接触右边框之前剪切名称值并附加一个字符串'.. 。'最后就像下面一样

enter image description here

如何在名称字段中使用UTF-8，unicode或普通英文字母？

P.S。我使用PHP进行服务器端处理。

Answer 1

最简单的方法是在该div上设置一些CSS ...

<div style="white-space:nowrap; text-overflow:ellipsis;">Er. Christopher Allen (ChristAllenMoreTextMoreText)</div>

您还必须设置white-space属性，否则您将无法进入此省略点。您还应该设置overflow:hidden。

但需要注意的是！这不在所有浏览器中都有效。 IE7及更高版本，Safari / Chrome，都很好。我相信它在Firefox中存在问题。

修改： Here is a Firefox workaround。虽然不奇怪。

Answer 2

由于您无法知道客户端（在用户的浏览器中）容器的确切宽度，因此您必须使用Javascript。

Answer 3

你不能让它包裹？

完善服务器端字符限制器，以便在线端之前切断，如果不是不可能的话，除非使用等宽字体。并且您无法考虑用户的浏览器设置，因此解决方案始终存在缺陷。如果创建了任何字符限制器，则需要客户端。

如何在名称元素上设置overflow: hidden？

Answer 4

我个人使用以下自定义函数在后端使用PHP：

function trunc($string, $limit, $break=" ", $pad="...") {
    // return with no change if string is shorter than $limit
    if(strlen($string) <= $limit) return $string;

    $string = substr($string, 0, $limit);
    if(false !== ($breakpoint = strrpos($string, $break))) {
    $string = substr($string, 0, $breakpoint);
    }

    return $string . $pad;
}

当然，它并不是非常狡猾，而且它并不完全自动调整，但我的项目要求在IE6中所有内容都能正常工作，这一切都可以正常工作。

如果你必须在前端做，请尝试3点：http://tpgblog.com/threedots/

Answer 5

正如Brad所说：CSS是要走的路。在客户端更好地处理灵活的表示。但是，大多数浏览器尚未实现此特定的CSS3功能。在此期间，您可以尝试使用其中一个jQuery（javascript）插件，使所有浏览器都可以使用相同的功能。

http://plugins.jquery.com/plugin-tags/ellipsis

Answer 6

您使用的是数据库吗？如果是这样，您可以编写一个条件语句来检查名称是否超过一定长度，如果是，则追加...

Answer 7

您可能希望在Em中定义宽度，然后将字符PHP侧计算为近似需要剪切和附加省略号的位置。

Answer 8

实际上，您需要计算字符串的像素长度并保持切割字符直到它低于阈值。我可以在服务器端解释一下，如果你手头有.net，但是你没有，所以也许这个javascript可能对客户有所帮助：Truncate a string nicely to fit within a given pixel width

HTML：我怎么能这样做......！

8 个答案: