blocks|key|891577|text|在跨度中对文本进行换行并使用jquery+width()|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|891578|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.jquery.com/CSS/width^0|1|2|E|E|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

Wrap text in a span and use <a href="http://docs.jquery.com/CSS/width" rel="noreferrer">jquery width()</a>

blocks|key|2300001|text|我不相信你可以只做一个字符串，但是如果你把字符串放在一个具有正确属性(大小、字体粗细等)的中；那么你应该能够使用jQuery来获得跨度的宽度。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2300002|<span+id='string_span'+style='font-weight:+bold;+font-size:+12'>Here+is+my+string
<script>
++$('#string_span').width();
</script>|code-block|syntax|javascript|2300003|entityMap^0|19|6|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

I don't believe you can do just a string, but if you put the string inside of a <code>&lt;span&gt;</code> with the correct attributes (size, font-weight, etc); you should then be able to use jQuery to get the width of the span.

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

blocks|key|712158|text|将其放在一个绝对定位的div中，然后使用clientWidth获取标签的显示宽度。您甚至可以将可见性设置为“隐藏”来隐藏div：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|712159|<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+:"%2B++width);
++++}
</script>|code-block|syntax|javascript|712160|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Put it in an absolutely-positioned div then use clientWidth to get the displayed width of the tag. You can even set the visibility to "hidden" to hide the div:

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

blocks|key|891681|text|用于HTML画布的上下文具有用于检查字体大小的内置方法。此方法返回一个TextMetrics对象，该对象具有包含文本宽度的width属性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|891682|function+getWidthOfText(txt,+fontname,+fontsize){
++++if(getWidthOfText.c+===+undefined){
++++++++getWidthOfText.c=document.createElement('canvas');
++++++++getWidthOfText.ctx=getWidthOfText.c.getContext('2d');
++++}
++++var+fontspec+=+fontsize+%2B+'+'+%2B+fontname;
++++if(getWidthOfText.ctx.font+!==+fontspec)
++++++++getWidthOfText.ctx.font+=+fontspec;
++++return+getWidthOfText.ctx.measureText(txt).width;
}|code-block|syntax|javascript|891683|或者，正如其他一些用户所建议的那样，您可以将其包装在span元素中：|891684|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;
}|891685|编辑2020:在Igor+Okorokov的建议下添加了字体name%2Bsize缓存。|891686|entityMap^0|Z|B|0|0|Q|4|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|10|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|R|$]]

The contexts used for HTML Canvases have a built-in method for checking the size of a font. This method returns a <code>TextMetrics</code> object, which has a width property that contains the width of the text.

<pre><code>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;
}
</code></pre>

Or, as some of the other users have suggested, you can wrap it in a <code>span</code> element:

<pre><code>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;
}
</code></pre>

EDIT 2020: added font name+size caching at Igor Okorokov's suggestion.

blocks|key|2300157|text|首先复制文本的位置和样式，然后使用Jquery+width()函数。例如，你有一个带有选择器的样式：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2300158|.style-head+span
{
++//Some+style+set
}|code-block|syntax|javascript|2300159|您需要使用此脚本中已包含的Jquery来执行此操作：|2300160|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();|2300161|不用说|2300162|2300163|+theWidthYouWant|blockquote|2300164|2300165|2300166|将保持像素长度。然后在完成后删除创建的元素，否则如果多次执行此操作，则会得到几个元素。或者添加一个ID来引用。|2300167|entityMap^0|1B|3|0|0|0|Q|0|0|0|3|0|0|0|G|0|0|0|0|1J|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|17|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]|$1|R|3|S|5|T|7|1C|8|@$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|U|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]|$1|V|3|-4|5|6|7|1G|8|@]|D|@]|E|$]]|$1|W|3|X|5|6|7|1H|8|@$9|1I|A|1J|B|C]]|D|@]|E|$]]|$1|Y|3|-4|5|6|7|1K|8|@]|D|@]|E|$]]]|Z|$]]

First replicate the location and styling of the text and then use Jquery width() function. This will make the measurements accurate.
For example you have css styling with a selector of:

<pre><code>.style-head span
{
 //Some style set
}
</code></pre>

You would need to do this with Jquery already included above this script:

<pre><code>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();
</code></pre>

Needless to say 

<blockquote>
 theWidthYouWant
</blockquote>

will hold the pixel length. Then remove the created elements after you are done or you will get several if this is done a several times. Or add an ID to reference instead.

blocks|key|711580|text|根据vSync的回答，纯javascript方法对于大量对象来说是闪电般的快速。这就是小提琴：https://jsfiddle.net/xeyq2d5r/8/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|711581|[1]:+https://jsfiddle.net/xeyq2d5r/8/+"JSFiddle"|code-block|syntax|javascript|711582|我收到了对建议的第三种方法的有利测试，该方法使用原生javascript与HTML+Canvas|711583|谷歌在选项1和选项3上相当有竞争力，2失败了。|711584|FireFox+48：|711585|方法1耗时938.895毫秒。|711586|方法2耗时1536.355毫秒。|711587|方法3耗时135.91499999999996毫秒。|711588|Edge+11方法1花费了4895.262839793865毫秒。|711589|方法2耗时6746.622271896686毫秒。|711590|方法3耗时1020.0315412885484毫秒。|711591|Google+Chrome:+52|711592|方法1耗时336.4399999999998毫秒。|711593|方法2耗时2271.71毫秒。|711594|方法3耗时333.30499999999984毫秒。|711595|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/xeyq2d5r/8/^0|1B|W|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1G|8|@]|9|@$A|1H|B|1I|1|1J]]|C|$]]|$1|D|3|E|5|F|7|1K|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|1L|8|@]|9|@]|C|$]]|$1|K|3|L|5|6|7|1M|8|@]|9|@]|C|$]]|$1|M|3|N|5|6|7|1N|8|@]|9|@]|C|$]]|$1|O|3|P|5|6|7|1O|8|@]|9|@]|C|$]]|$1|Q|3|R|5|6|7|1P|8|@]|9|@]|C|$]]|$1|S|3|T|5|6|7|1Q|8|@]|9|@]|C|$]]|$1|U|3|V|5|6|7|1R|8|@]|9|@]|C|$]]|$1|W|3|X|5|6|7|1S|8|@]|9|@]|C|$]]|$1|Y|3|Z|5|6|7|1T|8|@]|9|@]|C|$]]|$1|10|3|11|5|6|7|1U|8|@]|9|@]|C|$]]|$1|12|3|13|5|6|7|1V|8|@]|9|@]|C|$]]|$1|14|3|15|5|6|7|1W|8|@]|9|@]|C|$]]|$1|16|3|17|5|6|7|1X|8|@]|9|@]|C|$]]|$1|18|3|-4|5|6|7|1Y|8|@]|9|@]|C|$]]]|19|$1A|$5|1B|1C|1D|C|$1E|1F]]]]

Based on vSync's answer, the pure javascript method is lightning fast for large amount of objects. 
Here is the Fiddle: <a href="https://jsfiddle.net/xeyq2d5r/8/" rel="noreferrer">https://jsfiddle.net/xeyq2d5r/8/</a>

<pre><code>[1]: https://jsfiddle.net/xeyq2d5r/8/ "JSFiddle"
</code></pre>

I received favorable tests for the 3rd method proposed, that uses the native javascript vs HTML Canvas

Google was pretty competive for option 1 and 3, 2 bombed.

FireFox 48: 
Method 1 took 938.895 milliseconds. 
Method 2 took 1536.355 milliseconds. 
Method 3 took 135.91499999999996 milliseconds. 

Edge 11
Method 1 took 4895.262839793865 milliseconds. 
Method 2 took 6746.622271896686 milliseconds. 
Method 3 took 1020.0315412885484 milliseconds. 

Google Chrome: 52 
Method 1 took 336.4399999999998 milliseconds. 
Method 2 took 2271.71 milliseconds. 
Method 3 took 333.30499999999984 milliseconds.

blocks|key|711599|text|如果使用Snap.svg，则可以执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|711600|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|code-block|syntax|javascript|711601|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you use Snap.svg, the following works:

<pre><code>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
</code></pre>

blocks|key|891852|text|也许它会对某些人有用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|891853|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
}|code-block|syntax|javascript|891854|用法|891855|getMaxPixelsOfStrings({
++++++++++++strings:+['One',+'Two',+'Three',+'Four',+'Five'],
++++++++++++styles:+{
++++++++++++++fontSize:+'18px',
++++++++++++++letterSpacing:+'1px',
++++++++++++},
++++++++++})|891856|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Maybe it will useful for some
<pre class="lang-js prettyprint-override"><code>const getMaxPixelsOfStrings = ({ strings, styles = {} }) =&gt; {
 const spans = strings.map(str =&gt; {
 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 =&gt; span.getBoundingClientRect().width))

 spans.forEach(span =&gt; span.remove())

 return maxPixels
}
</code></pre>
usage
<pre class="lang-js prettyprint-override"><code>getMaxPixelsOfStrings({
 strings: ['One', 'Two', 'Three', 'Four', 'Five'],
 styles: {
 fontSize: '18px',
 letterSpacing: '1px',
 },
 })
</code></pre>

Is there any way to determine the pixel length of a string in jQuery/JavaScript?

Determine Pixel Length of String in Javascript/jQuery?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

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

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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