字符串看起来多长？

Question

我想知道字符串出现在屏幕上多长时间。我们没有使用固定宽度的字体，所以：

"Our mother's tummy makes dummy noises."

远远超过：

"Lilly Leadbetter lives life leisurely."

有没有办法告诉人物有多长时间？我不需要像素完美的精确度，只需要在大致正确的位置椭圆就足够长。 CSS溢出无济于事，因为在CSS确定了多长时间之后我无法附加椭圆。

Answer 1

这是一个至少有部分解决方案的related question。基本上，该技术是将文本呈现为隐藏的<span>，然后（使用JavaScript）测量跨度的像素宽度，然后切掉字符直到它适合您的目标宽度。

此处a jQuery plugin封装了此类功能，链接自this related question。

Answer 2

除非您使用固定宽度的字体，否则我认为没有任何简单的方法可以说明。也许最简单的方法是渲染候选文本并查看它有多长。

服务器端，这有点不可思议，因为你不确定浏览器将对文本做什么。您可以使用GD（或类似的东西）并最好地猜测浏览器将使用的字体和大小，但是当您无法相信您的猜测时，它是值得的吗？

客户端在javascript（或其他）中，您可以让浏览器呈现文本，并查看呈现的DOM对象有多长（如Jordan所说）。

一种解决方案，虽然心理上可能很难，但要理解网页渲染不是排版。你没有控制权。你尽力而为，接受限制并继续下一个问题。技术上很简单，但也许很难接受。

Answer 3

通常我同意fsb，你必须明白，在网络上你没有像素完美控制一切。这不是打印。选择一个合理的长度并将其从服务器端切掉，你可以避免在一个单词的中间切碎，使它看起来好一点。

如果你坚持一个完美的长度，请查看ThreeDots，一个jQuery插件。

Answer 4

您可以使用truncate辅助函数。即使您了解视觉长度，也无法针对所有浏览器/浏览器窗口调整大小优化它。