blocks|key|1335787|text|谢谢，我让它工作了-但它只在第一个项目上工作，然后停止，这与我声明变量的方式有关吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1335788|下面是当前的代码：|1335789|++++function+constrain(text,+original,+ideal_width){

++++var+temp_item+=+('<span+class="temp_item"+style="display:none;">'%2B+text+%2B'');
++++$(temp_item).appendTo('body');
++++var+item_width+=+$('span.temp_item').width();
++++var+ideal+=+parseInt(ideal_width);
++++var+smaller_text+=+text;

++++while+(item_width+>+ideal)+{
++++++++smaller_text+=+smaller_text.substr(0,+(smaller_text.length-1));
++++++++$('.temp_item').html(smaller_text);
++++++++item_width+=+$('span.temp_item').width();
++++}

++++var+final_length+=+smaller_text.length;

++++if+(final_length+!=+original)+{
++++++++return+(smaller_text+%2B+'&hellip;');
++++}+else+{
++++++++return+text;
++++}
}|code-block|syntax|javascript|1335790|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Thanks, I got it working - but it only works on the first item and stops, does this have to do with the way I'm declaring variables?

here's the current code:

<pre><code> function constrain(text, original, ideal_width){

 var temp_item = ('&lt;span class="temp_item" style="display:none;"&gt;'+ text +'&lt;/span&gt;');
 $(temp_item).appendTo('body');
 var item_width = $('span.temp_item').width();
 var ideal = parseInt(ideal_width);
 var smaller_text = text;

 while (item_width &gt; ideal) {
 smaller_text = smaller_text.substr(0, (smaller_text.length-1));
 $('.temp_item').html(smaller_text);
 item_width = $('span.temp_item').width();
 }

 var final_length = smaller_text.length;

 if (final_length != original) {
 return (smaller_text + '&amp;hellip;');
 } else {
 return text;
 }
}
</code></pre>

blocks|key|1335842|text|该函数接受要检查的文本、以像素为单位的ideal_width和css的类名。如果ideal_width小于文本宽度，则截断并添加hellip，否则返回未修改的文本。简单且有效！:-)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1335843|function+constrain(text,+ideal_width,+className){

++++var+temp_item+=+('<span+class="'%2BclassName%2B'_hide"+style="display:none;">'%2B+text+%2B'');
++++$(temp_item).appendTo('body');
++++var+item_width+=+$('span.'%2BclassName%2B'_hide').width();
++++var+ideal+=+parseInt(ideal_width);
++++var+smaller_text+=+text;

++++if+(item_width>ideal_width){
++++++++while+(item_width+>+ideal)+{
++++++++++++smaller_text+=+smaller_text.substr(0,+(smaller_text.length-1));
++++++++++++$('.'%2BclassName%2B'_hide').html(smaller_text);
++++++++++++item_width+=+$('span.'%2BclassName%2B'_hide').width();
++++++++}
++++++++smaller_text+=+smaller_text+%2B+'&hellip;'
++++}
++++$('span.'%2BclassName%2B'_hide').remove();
++++return+smaller_text;
}|code-block|syntax|javascript|1335844|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|$]]

The function takes the text to check, the ideal_width in pixel and the class name for the css. If the ideal_width is less than the text width it truncs and adds the hellip otherwise it returns the text unmodified. Simple and works! :-)

<pre><code>function constrain(text, ideal_width, className){

 var temp_item = ('&lt;span class="'+className+'_hide" style="display:none;"&gt;'+ text +'&lt;/span&gt;');
 $(temp_item).appendTo('body');
 var item_width = $('span.'+className+'_hide').width();
 var ideal = parseInt(ideal_width);
 var smaller_text = text;

 if (item_width&gt;ideal_width){
 while (item_width &gt; ideal) {
 smaller_text = smaller_text.substr(0, (smaller_text.length-1));
 $('.'+className+'_hide').html(smaller_text);
 item_width = $('span.'+className+'_hide').width();
 }
 smaller_text = smaller_text + '&amp;hellip;'
 }
 $('span.'+className+'_hide').remove();
 return smaller_text;
}
</code></pre>

blocks|key|1551412|text|如果你有文本，并且知道你想要的大小，为什么不使用substr呢？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1551413|我也做了类似的事情|1551414|$('#history-1').text(+$('#history-1').text().trim().substr(0,32)+%2B+"..."+)|code-block|syntax|javascript|1551415|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

If you have the text, and know the size you want, why not just use substr?

I did something similar with

<pre><code>$('#history-1').text( $('#history-1').text().trim().substr(0,32) + "..." )
</code></pre>

blocks|key|1551465|text|与其将其与脚本结合使用，为什么不直接使用CSS来指定要放入此字符串的元素的宽度呢？您可以使用text-overflow来告诉浏览器应该用省略号截断。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1551466|.truncated+{+display:inline-block;+max-width:100px;+overflow:hidden;+text-overflow:ellipsis;+white-space:nowrap;+}|code-block|syntax|javascript|1551467|text-overflow是一个CSS3声明，但在IE+6%2B、WebKit+312.3%2B+(Safari1.3%2B/Chrome)和Opera+9%2B+(+10.7以下版本需要-o-text-overflow声明)中受支持。|1551468|请注意，这个was+unimplemented+in+Firefox直到7.0，火狐用户的under+4%25仍在使用旧版本(大多数是3.6)。在旧版本中，您的文本仍将被截断，只是不会呈现省略号。如果你担心这一小部分用户，你可以使用this+jQuery+plugin，它在IE/WebKit/Opera/FirefoxFirefox7中什么也不做，但会在≥≤6中模拟text-overflow。|1551469|entityMap|0|LINK|mutability|MUTABLE|url|http://www.quirksmode.org/css/textoverflow.html|1|https://bugzilla.mozilla.org/show_bug.cgi?id=312156|2|http://en.wikipedia.org/wiki/Template:Firefox_usage_share|3|http://www.bramstein.com/projects/text-overflow/^0|1A|D|1A|D|0|0|0|0|D|2E|G|0|52|D|6|S|1|19|8|2|36|I|3|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@$9|15|A|16|1|17]]|E|$]]|$1|F|3|G|5|H|7|18|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|19|8|@$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|1E|8|@$9|1F|A|1G|B|C]]|D|@$9|1H|A|1I|1|1J]|$9|1K|A|1L|1|1M]|$9|1N|A|1O|1|1P]]|E|$]]|$1|O|3|-4|5|6|7|1Q|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]|W|$5|R|S|T|E|$U|X]]|Y|$5|R|S|T|E|$U|Z]]|10|$5|R|S|T|E|$U|11]]]]

Rather than hacking this together with script, why not just use CSS to specify the width of the element you're putting this string into? You can use <a href="http://www.quirksmode.org/css/textoverflow.html" rel="noreferrer"><code>text-overflow</code></a> to tell the browser it should truncate with an ellipsis.

<pre><code>.truncated { display:inline-block; max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
</code></pre>

<code>text-overflow</code> is a CSS3 declaration, but is supported in IE 6+, WebKit 312.3+ (Safari 1.3+/Chrome), and Opera 9+ (versions &lt; 10.7 need the <code>-o-text-overflow</code> declaration).

Note that this <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=312156" rel="noreferrer">was unimplemented in Firefox</a> until 7.0, and <a href="http://en.wikipedia.org/wiki/Template:Firefox_usage_share" rel="noreferrer">under 4%</a> of Firefox users are still using old versions (mostly 3.6). Your text will still be truncated in older versions, there just won't be an ellipsis rendered. If you're concerned about this small group of users, you can use <a href="http://www.bramstein.com/projects/text-overflow/" rel="noreferrer">this jQuery plugin</a>, which does nothing in IE/WebKit/Opera/Firefox &ge; 7, but will emulate <code>text-overflow</code> in Firefox &le; 6.

I'm trying to use jquery to write a fast function that calculates the pixel width of a string on a html page, then truncates the string until it reaches an ideal pixel width...

However it's not working (the text doesn't truncate)...

Here is the code I have:

<pre><code> function constrain(text, original, ideal_width){

 var temp_item = ('&lt;span class="temp_item" style="display:none;"&gt;'+ text +'&lt;/span&gt;');
 $(temp_item).appendTo('body');
 var item_width = $('span.temp_item').width();
 var ideal = parseInt(ideal_width);
 var smaller_text = text;

 while (item_width &gt; ideal) {
 smaller_text = smaller_text.substr(0, (smaller_text-1));
 $('.temp_item').html(text);
 item_width = $('span.temp_item').width();
 }

 var final_length = smaller_text.length;

 if (final_length != original) {
 return (smaller_text + '&amp;hellip;');
 } else {
 return text;
 }
}
</code></pre>

Here's how I'm calling it from the page:

<pre><code> $('.service_link span:odd').each(function(){
 var item_text = $(this).text();
 var original_length = item_text.length;
 var constrained = constrain(item_text, original_length,175);
 $(this).html(constrained);
});
</code></pre>

Any ideas on what I'm doing wrong? If there is a way to do it faster (ie bubble sort), that would be great too.

Thanks!

Truncate text with jQuery based on pixel width

我正在尝试使用jquery编写一个快速函数，该函数计算html页面上字符串的像素宽度，然后截断字符串，直到它达到理想的像素宽度……但是它不工作(文本不会被截断)……下面是我的代码：    function constrain(text, original, ideal_width){    var temp_item ...

问根据像素宽度使用jQuery截断文本
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问根据像素宽度使用jQuery截断文本EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问根据像素宽度使用jQuery截断文本
EN