为浏览器字体中的每个字符渲染pIxel宽度数据

Dev*_*von 6 html javascript css jquery font-size

我有一个表格列,需要限制在一定的宽度 - 比如100像素.有时,该列中的文本比此更宽,并且不包含空格.例如:

a_really_long_string_of_text_like_this_with_no_line_breaks_makes_the_table_unhappy
Run Code Online (Sandbox Code Playgroud)

我想计算文本服务器端的宽度,并在正确的字符数后添加省略号.问题是我没有关于文本的渲染大小的数据.

例如,假设浏览器是Firefox 3,字体是12px Arial.字母"a"的宽度,字母"b"的宽度等等是多少?

你有数据显示每个角色的像素宽度吗?还是一个生成它的程序?

我认为一个聪明的一次性JavaScript脚本可以做到这一点.但如果其他人已经这样做了,我不想花时间重新发明轮子.我肯定不是第一个遇到这个问题的人.

Dav*_*nde 2

这不仅不可能在服务器端实现,而且也没有意义。您不知道客户端将使用什么浏览器,也不知道客户端上的哪些字体设置将覆盖您分配给 HTML 片段的任何样式信息。您可能认为您在样式属性中使用了绝对定位像素,但客户端可能会简单地忽略这些像素或使用某些插件来缩放所有内容,因为客户端使用高 dpi 屏幕。

使用固定宽度通常是一个坏主意。