91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

css div內容超出隱藏如何實現

發布時間:2023-01-29 17:48:06 來源:億速云 閱讀:876 作者:iii 欄目:web開發

今天小編給大家分享一下css div內容超出隱藏如何實現的相關知識點,內容詳細,邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。

css div內容超出隱藏的實現方法:1、通過css代碼“overflow: hidden;”實現內容超出隱藏;2、通過js代碼“var myBox = document.getElementById('demo');var mydemoHtml = myBox.innerHTML.slice(0, 20) +'......';”實現內容超出隱藏即可。

CSS——div內文字的溢出部分用省略號顯示

使得div內文字的溢出部分用省略號顯示,可歸納為兩種解決辦法,一種方法是用CSS解決,另一種方法是js解決。

一、通過CSS控制顯示

div內顯示一行,超出部分用省略號顯示

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>

運行結果:

css div內容超出隱藏如何實現

二、通過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>

運行結果:

css div內容超出隱藏如何實現

以上就是“css div內容超出隱藏如何實現”這篇文章的所有內容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學習更多的知識,請關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

清涧县| 兴仁县| 湖州市| 林州市| 伊春市| 乌海市| 璧山县| 乌苏市| 上栗县| 乌鲁木齐市| 当涂县| 青浦区| 依兰县| 河曲县| 穆棱市| 张家口市| 肇庆市| 娄底市| 马山县| 汉源县| 合山市| 巴楚县| 长乐市| 龙陵县| 斗六市| 柏乡县| 界首市| 西乡县| 馆陶县| 溧阳市| 柳林县| 淳安县| 遂昌县| 南昌市| 通榆县| 盐源县| 赫章县| 济源市| 连平县| 惠安县| 故城县|