使得div內文字的溢出部分用省略號顯示，可歸納為兩種解決辦法，一種方法是用CSS解決，另一種方法是js解決。
一、通過CSS控制顯示
div內顯示多行，超出部分用省略號顯示
代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>例子</title> <style> /* 單行文字末尾省略號顯示 */ .div1{ height: 100px; width:100px; background:green; text-overflow: ellipsis; /* ellipsis:顯示省略符號來代表被修剪的文本 string:使用給定的字符串來代表被修剪的文本*/ white-space: nowrap; /* nowrap:規定段落中的文本不進行換行 */ overflow: hidden; /*超出部分隱藏*/ } /* 多行文字末尾省略號顯示 */ .div2{ /* height: 100px; */ width:100px; background:yellowgreen; display: -webkit-box; /* display: -webkit-box; 必須結合的屬性 ，將對象作為彈性伸縮盒子模型顯示 */ -webkit-box-orient: vertical; /* -webkit-box-orient 必須結合的屬性 ，設置或檢索伸縮盒對象的子元素的排列方式 */ -webkit-line-clamp: 5; /* -webkit-line-clamp用來限制在一個塊元素顯示的文本的行數 */ overflow: hidden; } </style> </head> <body> <div class="div1"> 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 </div> <div class="div2" > 嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿 </div> </body> </html>
運行結果：
二、通過js控制顯示
代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>實例</title> <style type="text/css"> .mydiv { width: 150px; height: 200px; background: pink; } </style> </head> <body> <div class="mydiv" id="demo">通過js操作的方法顯示文字，使得末尾的文字省略號顯示</div> <script> var myBox = document.getElementById('demo'); //直接用id獲取domo對象 var mydemoHtml = myBox.innerHTML.slice(0, 20) + '......'; // slice() 方法可從已有的數組中返回選定的元素 myBox.innerHTML = mydemoHtml; // 填充到指定位置 </script> </body> </html>
運行結果：
