框式文本-以像素为单位获取超出屏幕边界的文本长度
框式文本-以像素为单位获取超出屏幕边界的文本长度
提问于 2014-04-02 06:59:55
我正在尝试获取一个新闻提要的长度，它从一边滚动到另一边，在页面上滚动。我需要计算文本的宽度(以像素为单位)，以确定何时重新定位开始。
我已经将新闻提要文本包装在div容器中。文本具有CSS规则overflow: visible;和white-space: nowrap;集。
但是，当我试图获取文本的长度(以像素为单位)时:我只获得了我的视图的最大宽度。
我使用以下jQuery获取长度：$(".scroll-text").width();
这只能达到我的浏览器的最大视口大小。
是否有任何方法确定文本的长度(以像素为单位)，其中包括视口/屏幕上的文本？
编辑：这里是我的标记：http://pastebin.com/kTuMfZtd
可能会将此帖子标记为副本的消息：
这不是重复的。毫无疑问，在屏幕边界之外的像素长度。
回答 2
Stack Overflow用户
发布于 2014-04-02 07:15:06
我花了很长时间才找到，但也许你想在我的答案中找到类似here的东西。
使用此代码，您可以找到文本的宽度，并由此计算您的字符串的宽度。
function charSizes(numChars, cssFont) {
var span = document.createElement('span'),
text = document.createTextNode(''),
uia, i, j;
span.appendChild(text);
if (cssFont) span.style.font = cssFont;
span.style.padding = span.style.margin = 'none';
document.body.appendChild(span);
numChars = (numChars || 255);
uia = new Uint32Array(numChars * 2);
for (j = i = 0; i < numChars; j = 2 * ++i) {
text.data = String.fromCharCode(i);
uia[j] = span.offsetWidth;
uia[j + 1] = span.offsetHeight;
}
// free memory
document.body.removeChild(span);
span = text = numChars = cssFont = null;
// output lookup function
return function (c) {
var i = c.charCodeAt(0) * 2;
return {
width: uia[i],
height: uia[i + 1]
};
};
}
var defaultFont = charSizes(0xFF); // match the style of the text in your marquee
// using the second parameter if necessary现在
var str = 'foobar', i, len = 0;
for (i = 0; i < str.length; ++i) {
len += defaultFont(str[i]).width;
}
len; // 36 pixels on this page如果我们有更多关于您的标记的信息，您可能可以直接测量DOM中的#text节点。
Stack Overflow用户
发布于 2014-04-02 07:08:40
使用您最喜欢的浏览器检查元素：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22803768
复制相关文章
相似问题
腾讯云开发者
