如何將字符串作爲...使用jquery？

當字符串名稱大於限制時，將出現三個點，通過計數可以是如何將字符串作爲...使用jquery？

替換最後3個字符…來定義限制。例如比方說，我的名字有30字符，但是...顯示完整的名稱在屏幕的標籤字段可以在這個標籤只需要15個字符不是使用第一12字符和更換13,14和15個字符與…

在鼠標（即30個字符）

我怎麼可以在jQuery中存檔？或HTML

來源

2013-03-05 Nestor C

字符串從哪裏來？相關的HTML目前的樣子是什麼？ – 2013-03-05 15:07:14

MMMMMMMMMM≠iiiiiiiiii - 換句話說，計算字符不是確定字符串像素寬度的好方法。 – josh3736 2013-03-05 15:08:36

@ josh3736 - 解決方案：使用Comic Sans \ *運行\ * – Jamiec 2013-03-05 15:09:33

假設你的內容去ID爲「內容」股利之內，你的字符串保存一個longString變量

$(document).ready(function() { 
    var contentDiv = $("#content"); 
    contentDiv.html(longString.substr(0,12) + "..."); 

    contentDiv.mouseover(function(){ 
     this.html(longString); 
    }); 

    contentDiv.mouseout(function(){ 
     this.html(longString.substr(0,12) + "..."); 
    }); 
});

這是未經測試的範圍內，但它應該給你展示和隱藏你需要的功能。它也假設字符串總是至少12個字符。如果需要錯誤檢查，可以輕鬆添加。

來源

2013-03-05 15:16:42 Clayton

這並不需要jQuery的

var str = "whatever here" 
var shortened = str.length > 15 ? str.substring(0,12) + '...' : str;

來源

2013-03-05 15:07:52 Jamiec

鼠標懸停在此標籤上...顯示完整的名稱（即30個字符） – 2013-03-05 15:14:26

@NestorC如果您想以完整文本顯示標籤，我已經更新了我的答案。覈實。 – Derek 2013-03-05 16:11:08

您可以通過使用CSS，而不是使用任何JavaScript處理。當字符串超過寬度時，在css中有text-overflow用於生成效果...。如果您想顯示原始文本，您可以在css中添加:hover以刪除溢出邊界。

另一種方法是使用javascript計算內容長度並使用省略號修改內容。另外，如果要顯示原文，請使用hover()，但必須先存儲原文。

所以，有兩種解決方案，請在此查看詳細：http://jsfiddle.net/zqfhx/1/

CSS

<style type="text/css"> 
.w100C { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;  
    width: 100px; 
    min-width: 0; 
} 

.w100C:hover { 
    overflow: none; 
    width: auto; 
} 
</style>

HTML

<div class="w100C"> 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever s 
</div>

的JavaScript（jQuery的）替代方法

的JavaScript

$(document).ready(function() { 

    function TruncateText(text) 
    { 
     if(text.length > 12) 
     { 
      text = txt.substring(0,12) + "..."; 
     } 
     return text; 
    } 

    var txt = $("#abc").text(); 
    $("#abc").attr("orgTxt", txt); 
    txt = TruncateText(txt); 
    $("#abc").text(txt); 

    $("#abc").hover(function(){ 
     var t = $("#abc").attr("orgTxt"); 
     $("#abc").text(t); 
    }, function(){ 
     var t = $("#abc").text(); 
     t = TruncateText(t); 
     $("#abc").text(t); 
    });  
});

HTML

<div id="abc">I am very long string</div>

就個人而言，我會建議使用CSS而不是JavaScript的，因爲它可以通過造型和減少執行腳本處理多個元素。

來源

2013-03-05 15:14:16 Derek

CSS解決方案非常完美 - 簡單，靈活且更準確（考慮像素大小而不僅僅是計數字符）。 – strah 2013-03-05 15:23:47

如果您只是試圖根據元素大小「適合」，則可能需要嘗試text-overflow。

JSFiddle for illustrative purposes

Moz Docs for text-overflow

來源

2013-03-05 15:14:27 brbcoding

如何將字符串作爲...使用jquery？

回答

相關問題