在 Javascript/jQuery 中确定字符串的像素长度? ？

在 jQuery/JavaScript 中有没有确定字符串像素长度的方法？

108856 次浏览
小开
最佳答案

在 跨度中包装文本并使用 Jquery width ()

小开

我不相信你可以只做一个字符串，但是如果你把字符串放在 <span>中，并且有正确的属性(大小，字体重量等) ，你就可以使用 jQuery 来获得 span 的宽度。

<span id='string_span' style='font-weight: bold; font-size: 12'>Here is my string</span>
<script>
$('#string_span').width();
</script>
小开

将它放在一个绝对定位的 div 中，然后使用 clientWidth 获取标记的显示宽度。你甚至可以将可见性设置为“隐藏”来隐藏 div:

<div id="text" style="position:absolute;visibility:hidden" >This is some text</div>
<input type="button" onclick="getWidth()" value="Go" />
<script type="text/javascript" >
function getWidth() {
var width = document.getElementById("text").clientWidth;
alert(" Width :"+  width);
}
</script>
小开

用于 HTML 画布的上下文具有检查字体大小的内置方法。此方法返回一个 TextMetrics对象，该对象具有包含文本宽度的 width 属性。

function getWidthOfText(txt, fontname, fontsize){
if(getWidthOfText.c === undefined){
getWidthOfText.c=document.createElement('canvas');
getWidthOfText.ctx=getWidthOfText.c.getContext('2d');
}
var fontspec = fontsize + ' ' + fontname;
if(getWidthOfText.ctx.font !== fontspec)
getWidthOfText.ctx.font = fontspec;
return getWidthOfText.ctx.measureText(txt).width;
}

或者，正如其他一些用户建议的那样，您可以将它包装在一个 span元素中:

function getWidthOfText(txt, fontname, fontsize){
if(getWidthOfText.e === undefined){
getWidthOfText.e = document.createElement('span');
getWidthOfText.e.style.display = "none";
document.body.appendChild(getWidthOfText.e);
}
if(getWidthOfText.e.style.fontSize !== fontsize)
getWidthOfText.e.style.fontSize = fontsize;
if(getWidthOfText.e.style.fontFamily !== fontname)
getWidthOfText.e.style.fontFamily = fontname;
getWidthOfText.e.innerText = txt;
return getWidthOfText.e.offsetWidth;
}

编辑2020: 在 Igor Okorokov 的建议下添加字体名称 + 大小缓存。

小开

首先复制文本的位置和样式，然后使用 Jquery width ()函数。< strong > 这将使测量精确。 例如，你有一个 css 样式选择器:

.style-head span
{
//Some style set
}

您需要使用这个脚本上面已经包含的 Jquery 来完成这项工作:

var measuringSpan = document.createElement("span");
measuringSpan.innerText = 'text to measure';
measuringSpan.style.display = 'none'; /*so you don't show that you are measuring*/
$('.style-head')[0].appendChild(measuringSpan);
var theWidthYouWant = $(measuringSpan).width();

不用说了

你想要的女人

将保持像素长度。然后删除创建的元素后，您完成或您将得到几个，如果这样做了几次。或者为引用添加一个 ID。

小开

基于 vSync 的回答，纯 javascript 方法对于大量对象来说是快如闪电。 这里是小提琴: < a href = “ https://jsfiddle.net/xeyq2d5r/8/”rel = “ norefrer”> https://jsfiddle.net/xeyq2d5r/8/

[1]: https://jsfiddle.net/xeyq2d5r/8/ "JSFiddle"

我收到了第三种方法的有利测试，这种方法使用了本地的 javascript 和 HTML Canvas

谷歌对于选项1和选项3来说竞争相当激烈，但是选项2失败了。

火狐48:
方法1耗时938.895毫秒。
方法2耗时1536.355毫秒。
方法3用时135.91499999999996毫秒

边缘11 方法1用时4895.262839793865毫秒。
方法2用时6746.622271896686毫秒。
方法3采用1020.0315412885484毫秒

谷歌 Chrome: 52
方法1用时336.4399999999998毫秒。
方法2耗时2271.71毫秒。
方法3用时333.304999999999984毫秒

小开

如果使用 Snap.svg，可以执行以下操作:

var tPaper = Snap(300, 300);
var tLabelText = tPaper.text(100, 100, "label text");
var tWidth = tLabelText.getBBox().width;  // the width of the text in pixels.
tLabelText.attr({ x : 150 - (tWidth/2)});   // now it's centered in x
小开

也许对某些人有用

const getMaxPixelsOfStrings = ({ strings, styles = {} }) => {
const spans = strings.map(str => {
const span = document.createElement('span')
span.append(str)
Object.assign(span.style, {
position: 'absolute',
...styles,
})


return span
})


document.querySelector('html').prepend(...spans)
const maxPixels = Math.max(...spans.map(span => span.getBoundingClientRect().width))


spans.forEach(span => span.remove())


return maxPixels
}

用途

getMaxPixelsOfStrings({
strings: ['One', 'Two', 'Three', 'Four', 'Five'],
styles: {
fontSize: '18px',
letterSpacing: '1px',
},
})

提交答案