js實現字數顯示切換效果，多餘文字用...表示

阿新 • • 發佈：2018-12-19

受顯示區域和顯示效果限制，過長的文字完全顯示出來顯得與頁面格格不入，那麼為了讓顯示效果與整個頁面顯得更協調，我們不得不只顯示一部分文字作為預覽。
下面為文字顯示切換效果程式碼。

JS程式碼：

<script>
function nxw(){  
debugger;
        var textplay= document.getElementsByClassName("textplay") ; 
         for(var i=0;i<textplay.length;i++){
              var str=textplay[i].getAttribute('value' 
);  
              textplay[i].innerHTML=str.substr(0,15)+"...";//先按一定字數縮排  
             }

        var j=0;  
        var plus = document.getElementById("plus");  
        plus.onclick = function ()//點選+的時候顯  
        {     

            if(j==0){     
              for(var i=0;i<textplay.length;i++){
                  var 
 str=textplay[i].getAttribute('value');  
                  textplay[i].innerHTML=str;//先按一定字數縮排  
              }  
                plus.innerHTML = "<font size='5'>-</font>";     
                j=j+1;  
            }  
            else{  
                for(var i=0;i<textplay.length;i++){
                  var 
 str=textplay[i].getAttribute('value');  
                  textplay[i].innerHTML=str.substr(0,15)+"...";//先按一定字數縮排  
               }  
                plus.innerHTML = "<font size='5'>+</font>"  ;
                j=0;      
            } 
        }
    };  
</script>

HTML程式碼：

<p class="textplay" value="實現前臺文字顯示字數，當多於一定數量時，用...代替">實現前臺文字顯示字數，當多於一定數量時，用...代替</p>
<p class="textplay" value="實現前臺文字顯示字數，當多於一定數量時，用...代替">實現前臺文字顯示字數，當多於一定數量時，用...代替</p>
<p class="textplay" value="實現前臺文字顯示字數，當多於一定數量時，用...代替">實現前臺文字顯示字數，當多於一定數量時，用...代替</p>
<p class="textplay" value="實現前臺文字顯示字數，當多於一定數量時，用...代替">實現前臺文字顯示字數，當多於一定數量時，用...代替</p>
<p style="color:green" id="plus" onclick="nxw()"><font size="5">+</font></p>

js實現字數顯示切換效果，多餘文字用...表示

受顯示區域和顯示效果限制，過長的文字完全顯示出來顯得與頁面格格不入，那麼為了讓顯示效果與整個頁面顯得更協調，我們不得不只顯示一部分文字作為預覽。下面為文字顯示切換效果程式碼。 JS程式碼： <script> function nxw(){ debugger;

用html+css+js實現選項卡切換效果

window.onload = function () { chang(); var myTab = document.getElementById("gameDevelopment"); //整個div var myUl = myTab.getElementsByTagName("ul")[0];//一個

原生JS實現移動端模組的左右滑動切換效果，基於vue、stylus

原生JS實現移動端模組的左右滑動動畫效果，基於vue、stylus 大概實現方案：手指touch螢幕的整個過程，會派發touchstart、touchmove、touchend三個事件，對這三個事件設定相應函式，通過移動過程中位置的變化計算出偏移值，進行對應的設定。注：

原生js實現隨著滾動條滾動，導航會自動切換的效果

最近學習前端，把前面用原生js寫的一段有關tab切換效果的程式碼貼上，實現的效果比較簡陋，請大家見諒 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/

用js給div繫結事件，實現點選切換效果的幾種方式總結

用js給div繫結事件，實現點選切換效果，總結有如下幾種方式 script type="text/javascript"> function btnAction() { var titleNValue = document.getElementBy

js實現類似TabPage切換的效果

首先宣告：這個js演算法的原理並非原創，這裡只是學習實現的效果和原理！尊重原創，原創作者無從考證，多個開源的類似後臺管理系統中都有這個多iframe的效果，且實現的效果一致，都採用了相同的演算法版本。本人只是學習瞭解之後，做了一個精簡版的還原。首先核心的js實現程式碼如下： $(fu

原生js實現音樂播放器功能，可以實時顯示歌詞並且高亮當前句

最近在做專案，總結一下學到的知識，首先就是一個簡單的音樂播放器。可以顯示歌詞，並且突出顯示當前播放的這一句。但是歌詞必須是要轉碼成utf-8的，不然是亂碼，後面提供我淘到的轉碼工具，非常簡單，把

VUE實現Studio管理後臺（二）：Slot實現選項卡tab切換效果，可自由填裝內容

作為RXEditor的主介面，Studio UI要使用大量的選項卡TAB切換，我夢想的TAB切換是可以自由填充內容的。可惜自己不會實現，只好在網上搜索一下，就跟現在你做的一樣，看看有沒有好事者實現了類似功能，並分享了出來，百度到的結果不甚理想，他們大都是一個控制元件通過傳入物件資料實現的，擴充套件性差，不能分

JS實現ul,li排序效果

for char 列表 clas pre oct btn code elements <!DOCTYPE html> <html> <head> <title>js列表排序</title> <

使用javascript實現圖片上下切換效果並且實現順序循環播放

js實現div吸頂效果

src ons posit 全局變量 mar document padding addclass type <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script

用JS實現實時顯示系統時間

class mon 星期 itl utf sso inner watermark cti 下面為大家附上代碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset=

js實現動態顯示時間

css rip 無法顯示寫入 title 定時器 order date oca 思路： *得到當前時間　　var date = new Date(); 　　//格式化為本地時間　　var d1 = date.toLocaleString(); *使頁面每秒顯示一次時間

js 實現讀取json 文件，實現批量發送請求

del pac files require mod 項目 == pack func 最終文件結構： request-demo 　node_module run.js data.json package.js　準備工作：新建一個項目文件夾，執行以下命令, 會自動

HTML怎麼讓table中的td內容過長顯示為固定長度，多餘部分用省略號代替

HTML如何讓table中的td內容過長顯示為固定長度，多餘部分用省略號代替這個問題呢，是由於我們公司測試的部門測出來的，雖然說測試的內容本身就是個BUG，不過這個也讓我學到了一個比較好的歸類於佈局的一個小技巧，就是將td標籤中過長的內容只顯示為這個td的width的長度，之後的便以省略號

文字顯示兩行，多餘的省略號（相容搜狐）

我平時除錯程式碼用的谷歌，之前也沒有注意到這個問題，但是最近老闆用搜狐看我寫的網站，發現了在搜狐上文字超過兩行顯示省略號這個樣式不起作用，於是找到了這個解決方案。　　1、不需要相容　　p{ 　　　　word-break: break-all; 　　　　text-overf

JS實現倒計時(時、分，秒)

一、html程式碼 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

【Html】Clipboard.js 實現點擊復制，剪切板操作

lan ofo article span err arc blank javascrip 百度雲可以使用cdn 或者直接下載設置好引用路徑(百度雲下載) <script type="text/javascript" src="./dist/clipboard.m

vue實現選項卡切換效果

效果如下：說明：這裡我使用的原理是利用vue中的v-show/顯示隱藏指令，當為true的時候顯示，為false的時候隱藏 1html程式碼： <head> <meta charset="UTF-8"> <base target="_blan

JS實現雪花飄落特效效果

1、概述：以任意圖片作為背景，在背景上新增雪花下落的特效效果，此處使用隨機顏色、隨機大小的彩色雪花實現。 2、效果實現功能：（1）雪花隨機出現並隨機消失；（2）雪花出現時大小隨機；（3）雪花顏色隨機；（4）雪花顏色逐漸變淡並消失；（5）雪花消失後刪除其物件

js實現字數顯示切換效果，多餘文字用...表示

相關推薦