當文字很長時顯示短文本？

如何在元素內顯示特定長度的文本，並且在文本比200字母長的情況下增加點。然後追加...作爲修改後的文本鏈接。當用戶點擊這些點時顯示全文。對不起，我的英語很差。 HTML：當文字很長時顯示短文本？

<div> 
    <span="small2">TEXT MORE THEN 200 letters</span> <!-- Show 200 letters with dots as link --> 
    <span="small2">TEXT LESS THEN 200 letters</span> <!-- Show full text without dots --> 
</div>

我的jQuery的（不是全因爲我不是專業）：

$(".small2").each(function(){ 
    fulltext = $(this).text(); 
    if ($(this).text().length > 200) { 
     $(this).text($(this).text().substr(0, 186)); 
     $(this).append('<a href="#">...</a>>'); 
    } 
});

來源

2014-03-25 user3342042

這不是太清楚你問這裏......這段代碼在哪裏出現了問題？ – Lix

我不是親bro。它用'substr'函數顯示具有特定長度的字符串。我問你是否可以導航我成功。 – user3342042

什麼不適用於您的解決方案？ –

一個簡單的jQuery實現：

$(".small2").each(function() { 
    text = $(this).text(); 
    if (text.length > 200) { 
     $(this).html(text.substr(0, 186) + '<span class="elipsis">' + text.substr(186) + '</span><a class="elipsis" href="#">...</a>'); 
    } 
}); 
$(".small2 > a.elipsis").click(function (e) { 
    e.preventDefault(); //prevent '#' from being added to the url 
    $(this).prev('span.elipsis').fadeToggle(500); 
});

HTML：

<div> 
    <span class="small2">TEXT MORE THEN 200 letters TEXT MORE THEN 200 letters TEXT MORE THEN 200 letters TEXT MORE THEN 200 letters TEXT MORE THEN 200 letters TEXT MORE THEN 200 TEXT MORE THEN 200 TEXT MORE THEN 200 TEXT MORE THEN 200 TEXT MORE THEN 200</span> 
    <span class="small2">TEXT LESS THEN 200 letters</span> 
</div>

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

來源

2014-03-25 11:52:43 Mooseman

嗨。你的小提琴似乎是靜止的。 – user3342042

@ user3342042單擊最後一行中的'...'，隱藏的文本將被切換。 – Mooseman

爲什麼在你的小提琴中的文字展開後點？ – user3342042

你的HTML代碼是錯誤的，它應該是這樣的：

<div> 
    <span class="small2">qwertyuiopasdfghjklzxcvbnm</span> <!-- Show 200 letters with dots as link --> 
    <span class="small2">abcd</span> <!-- Show full text without dots --> 
</div>

它的工作原理：http://jsfiddle.net/MXC5L/

來源

2014-03-25 11:51:44

試了你的小提琴兄弟。沒有成功。無論如何，感謝您發佈。 – user3342042

使用ID的兩個跨越
下面是跨度CSS

#Span_ID

{ 
overflow: hidden; 
white-space: nowrap; 
-o-text-overflow: ellipsis; 
-ms-text-overflow: ellipsis; 
text-overflow: ellipsis; 
width: 91px; 
}

這裏你可以改變寬度，這取決於你想要顯示的文本的長度。

之後，您必須在腳本標記中包含mootools-core-1.4.5-full-nocompat.js文件。因爲文本溢出：省略號不會沒有這個工作。

此後使用jQuery ToolTip在工具提示中顯示您的完整文本。

這裏是JSFIDDLE例

來源

2014-03-25 12:02:38

當文字很長時顯示短文本？

回答

相關問題