可能會截斷單詞或顯示縮短的單詞，但在查看源代碼時顯示所有單詞。如何在jQuery中截斷單詞而不切斷源代碼中的單詞？

例子：（截斷詞或縮短詞。）

測試有這麼...

當您檢查與開發的瀏覽器工具，可以顯示下面的源代碼：

我的代碼

String.prototype.truncString = function(max, add){ 
 
    add = add || '...'; 
 
    return (this.length > max ? this.substring(0,max)+add : this); 
 
}; 
 

 
str = "testing with some string see console output"; 
 
console.log( str.truncString(15,'...') ); 
 

 
$(function() { 
 
\t $('#original').text(str); 
 
\t $('#result').text(str.truncString(15,'...')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='original'></div> 
 
<div id='result'></div>

來源

2017-10-11 J. Doe

爲什麼不在截斷它之前將整個字符串傳遞給變量..然後只是打印該變量？ –

只是打印str變量？ –

我誤解了你的問題。 –

預期的結果：

<div id="result"> 
    testing with some... 
    <div id="original" style="display:none;"'>string see console output</div> 
</div>

試試：

HTML：

<div id="original">string see console output</div>

的jQuery：

$(function() { 
    var maxlength = 10; 
    var hello = $('#original').text().substring(0,maxlength)+'...'; 
    $('#original').before('<div id="result">'+hello+'</div>') 
    $('#original').css('display','none').appendTo('#result'); 
});

小提琴：http://jsfiddle.net/msL6hqpr/4/

更新1：

我想#original內容僅剩下（「控制檯輸出」）：

小提琴：http://jsfiddle.net/msL6hqpr/5/

更新2：

請不要截斷完整的詞：

小提琴：http://jsfiddle.net/msL6hqpr/6/

來源

2017-10-11 03:43:33

也許你只需要移除'width'的'CSS'''）用小提琴更新 –

@ J.Doe如果使用javascript/jquery，那會是一個DOM修改並且也會影響源結構。只是不可能，我想。 –

@ J.Doe我明白了，如果你想要什麼，我對此有個想法。我會再次更新我的答案。 –

-2

var str = $("#original").text() 
 
var res = str.replace("Microsoft", "W3Schools"); 
 
$("#original").text(res);

來源

2017-10-11 05:35:01

如何在jQuery中截斷單詞而不切斷源代碼中的單詞？

回答

更新1：

更新2：

相關問題