呈现浏览器字体中每个字符的pIxel宽度数据 [英] Rendered pIxel width data for each character in a browser's font

问题描述

我有一个表格列，需要限制为一定的宽度 - 例如100像素。有时，该列中的文本宽于此，并且不包含空格。例如：

I have a table column that needs to be limited to a certain width - say 100 pixels. At times the text in that column is wider than this and contains no spaces. For example:

a_really_long_string_of_text_like_this_with_no_line_breaks_makes_the_table_unhappy

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

I would like to calculate the width of text server-side and add an ellipsis after the correct number of characters. The problem is that I don't have data about the rendered size of the text.

例如，假设浏览器是Firefox 3，字体是12px Arial。字母a的宽度，字母b的宽度等等。

For example, assuming the browser was Firefox 3 and the font was 12px Arial. What would be the width of the letter "a", the width of the letter "b", etc.?

你有数据显示每个字符的像素宽度？还是程序生成它？

Do you have data showing the pixel width of each character? Or a program to generate it?

我认为一个聪明的一次性javascript脚本可以做的伎俩。但我不想花时间重新发明轮子，如果有人已经这样做。我肯定不是第一个反对这个问题的人。

I think a clever one-time javascript script could do the trick. But I don't want to spend time re-inventing the wheel if someone else has already done this. I am surely not the first person to come up against this problem.

推荐答案

这不仅不可能做服务器端，它也没有意义。您不会使用客户端将使用的浏览器，并且您不知道客户端上的什么字体设置将覆盖您分配给一块HTML的任何样式信息。您可能认为您在样式属性中使用了绝对定位像素，但是客户端可能只是忽略这些像素或使用一些插件缩放一切，因为客户端使用高dpi屏幕。

This would not only be impossible to do server-side, it would also not make sense. You don't what browser your client will be using, and you don't know what font settings on the client side will override whatever styling information you assign to a piece of HTML. You might think that you're using absolute positioning pixels in your style properties, but the client could simply be ignoring those or using some plugin to zoom everything because the client uses a high-dpi screen.

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

Using fixed widths is generally a bad idea.

这篇关于呈现浏览器字体中每个字符的pIxel宽度数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！