span標簽中顯示固定長度，超出部分用省略號代替，光標放到文字上顯示全部

 

在span中實現顯示某段內容，固定其長度，多余部分用省略號代替，這樣就用到html的title屬性；

如：<span title="value"></span>

title屬性：其值是text，屬性描述是規定元素的工具提示文本，意思就是鼠標移到元素上時顯示title中的內容；

以span為例實現上述功能：

html：

<div> 　　<span class="basic-l left10">篩選標簽：</span> 　　<span class="basic-r" style='width:120px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;' id="showLabelAndAttrName" title=""></span> </div>

js：

$("#showLabelAndAttrName").text("測試標簽1-測試標簽屬性1、測試標簽屬性2");
$("#showLabelAndAttrName").attr("title","測試標簽1-測試標簽屬性1、測試標簽屬性2");

結果展示：

注：樣式style中的white-space:nowrap;為規定段落中的文本不換行；text-overflow:ellipsis;為當文本內容溢出時顯示省略標記；overflow:hidden;為超出寬度后就隱藏

為title屬性賦值使用$("#id").attr("title",title值)。

 ----------------------------------------------------------------------------------------以下為6.27追加----------------------------------------------------------------------------------------

在js中設置顯示長度超出部分用省略號，其后有"查看更多"連接，點擊詳情展示全部信息，再次點擊則關閉展示。

 

 

html：

<div> 　　<span class="basic-l left10">篩選標簽：</span> 　　<span class="basic-r"id="showLabelAndAttrName" title=""></span> 　　<span class="basic-r" id="showSelectLabel" style="display:none;margin-left: 113px;"></span> 　　<a id="showHideLabel" onclick="showHideLabel()" style="display:none;">查看更多</a></div>

其中：

<span class="basic-r" id="showSelectLabel" style="display:none;margin-left: 113px;"></span> <a id="showHideLabel" onclick="showHideLabel()" style="display:none;">查看更多</a>

<span></span>標簽為要顯示的所有內容；<a></a>標簽為查看更多連接；且全部隱藏。

js：

var allLabelAttr = "測試標簽測試標簽測試標簽測試標簽測試標簽測試標簽測試標簽測試標簽測試標簽測試標簽"; if (allLabelAttr.length > 20) { 　　//截取固定長度 　　var allLabelAttrCut = allLabelAttr.substring(0, 20); 　　//為隱藏<span>標簽賦值--全部 　　$("#showSelectLabel").text(allLabelAttr); 　　//為非隱藏<span>標簽賦值--截取固定長度 　　$("#showLabelAndAttrName").text(allLabelAttrCut+"..."); 　　//顯示連接標簽<a> 　　$("#showHideLabel").toggle(); } else {
　　$("#showLabelAndAttrName").text(allLabelAttr);
} //點擊查看更多調用函數 function showHideLabel(){ $("#showSelectLabel").toggle(); }

結果展示：

　　點擊“查看更多”

 

從頁面效果上看非隱藏<span>標簽值還存在，且"查看更多"連接在點擊是也會下移到隱藏的<span>初，如果根據非隱藏<span>中的id把值去掉也不能解決"查看更多"連接下移；
那么可以使用刪除和新增標簽來解決；修改后的代碼如下：
html：在第一個<span>中的class中加了一個addLabel

<div>
　　<span class="basic-l left10 addLabel">篩選標簽：</span>
　　<span class="basic-r" id="showLabelAndAttrName" title=""></span>
　　<span class="basic-r" id="showSelectLabel" style="display:none;"></span>
　　<a id="showHideLabel" onclick="showHideLabel()" style="display:none;">查看更多</a>    
</div>

js：

var allLabelAttr = "測試標簽測試標簽測試標簽測試標簽測試標簽測試標簽測試標簽測試標簽測試標簽測試標簽"; if (allLabelAttr.length > 20) { 　　//截取固定長度 　　allLabelAttrCut = allLabelAttr.substring(0, 20); 　　//為隱藏<span>標簽賦值--全部 　　$("#showSelectLabel").text(allLabelAttr); 　　//為非隱藏<span>標簽賦值--截取固定長度 　　$("#showLabelAndAttrName").text(allLabelAttrCut+"..."); 　　//顯示連接標簽<a> 　　$("#showHideLabel").toggle(); } else { 　　$("#showLabelAndAttrName").text(allLabelAttr); } //點擊查看更多調用函數 var allLabelAttrCut = "";//截取固定長度,全局變量 var flag = true;//點擊標識；默認true,點擊變為false，再點擊變為true function showHideLabel(){ //定義非隱藏標簽；第一次點擊刪除html中的此標簽，再次點擊把此標簽添加到原來的html處 var span = $("<span class='basic-r' id='showLabelAndAttrName' title=''>"+allLabelAttrCut+"..."+"</span>"); if (flag) { //刪除html中非隱藏標簽 $("#showLabelAndAttrName").remove(); flag = false; } else {//截取固定長度有值 //添加標簽到html中 $(".addLabel").after(span); flag = true } $("#showSelectLabel").toggle(); }

這樣就可以把上述所說的問題解決了；效果展示如下：

未點擊

已點擊

 

注：js中使用了兩個函數分別是toggle()和after();
toggle()可用作切換元素的可見狀態；當前元素可見，那么觸發后就會隱藏，如果元素不可見出發后則變為可見。
該方法版本 1.8 中被廢棄，在版本 1.9 中被移除。

after()在被選元素后插入指定元素；與之相反的是before()。