logo标签列表

浏览器字体中每个字符的像素宽度数据

javascriptjqueryhtmlcssfont-size
6

我有一个表格列需要限制宽度 - 比如说100像素。有时候该列中的文本会比这个限制更宽，而且没有空格。例如：

a_really_long_string_of_text_like_this_with_no_line_breaks_makes_the_table_unhappy

我想在服务器端计算文本的宽度，并在正确数量的字符后添加省略号。问题是我没有关于文本呈现大小的数据。
例如，假设浏览器是Firefox 3，字体为12px Arial。字母"a"的宽度，字母"b"的宽度等是多少？
您是否有显示每个字符像素宽度的数据？或者生成此类数据的程序？
我认为一个聪明的一次性javascript脚本可以解决这个问题。但如果其他人已经做过这件事，我不想花时间重新发明轮子。我肯定不是第一个遇到这个问题的人。
13个回答
0
http://www.css3.info/preview/text-overflow/

这是 CSS3 的一个新功能。

0

由于字体大小可以在浏览器端轻松更改，因此您的服务器端计算很容易失效。

快速的客户端解决方案是使用overflow属性为单元格设置样式：

td
{
    overflow: scroll; /* or overflow: hidden;  etc. */
}

一个更好的替代方案是在服务器端截断字符串，并提供一个简单的JavaScript工具提示，以显示较长版本。 一个“展开”按钮也可以帮助，在一个覆盖层div中显示结果。
0
你可以将文本放入一个不可见的 span 中，并读取该 span 的宽度，但基本上这看起来像是有人试图破坏你的网站，因此我建议禁止发布超过一定长度的单词，例如 30 个字符（不包括空格）的帖子（允许链接更长！-）
-- 但简单的方法是在表格单元格内放置一个块级元素：
<td><div style="width:100px;overflow:hidden">a_really_long_string_of_text_like_this_with_no_line_breaks_makes_the_ta ... </div></td>

这将有效地停止表格混乱！o]

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接