css div內容超出隱藏怎麼實現

css div內容超出隱藏的實作方法：1、透過css程式碼「overflow: hidden;」實作內容超出隱藏；2、透過js程式碼「var myBox = document.getElementById('demo');var mydemoHtml = myBox.innerHTML.slice(0, 20) '......';」實作內容超出隱藏即可。

本教學操作環境：Windows10系統、css3版、DELL G3電腦

css div內容超出隱藏怎麼實現？

CSS－div內文字的溢出部分以省略號顯示

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

一、透過CSS控制顯示

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

div內顯示多行，超出部分用省略號顯示

程式碼：

nbsp;html>
    
        <meta>
        <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>
    
    
        <div>
            哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈        </div>
        <div>
            嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿        </div>
    

運行結果：

##二、透過js控制顯示

 程式碼：

nbsp;html>
    
        <meta>
        <title>实例</title>
        <style>
            .mydiv {
                width: 150px;
                height: 200px;
                background: pink;
            }
        </style>
    
    
        <div>通过js操作的方法显示文字，使得末尾的文字省略号显示</div>
        <script>
            var myBox = document.getElementById(&#39;demo&#39;); //直接用id获取domo对象
            var mydemoHtml = myBox.innerHTML.slice(0, 20) + &#39;......&#39;; // slice() 方法可从已有的数组中返回选定的元素            myBox.innerHTML = mydemoHtml; // 填充到指定位置
        </script>
    

# 運行結果：

##推薦學習： 《

css影片教學

》 

##

以上是css div內容超出隱藏怎麼實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！