溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

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

css div內(nèi)容超出隱藏如何實現(xiàn)

發(fā)布時間：2023-01-29 17:48:06 來源：億速云 閱讀：871 作者：iii 欄目：web開發(fā)

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

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

CSS——div內(nèi)文字的溢出部分用省略號顯示

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

一、通過CSS控制顯示

div內(nèi)顯示一行，超出部分用省略號顯示

div內(nèi)顯示多行，超出部分用省略號顯示

代碼：

<!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:規(guī)定段落中的文本不進(jìn)行換行   */ 
                overflow: hidden; /*超出部分隱藏*/
            }
            /* 多行文字末尾省略號顯示 */
            .div2{
                /* height: 100px; */
                width:100px;
                background:yellowgreen; 
                display: -webkit-box;  /*  display: -webkit-box; 必須結(jié)合的屬性 ，將對象作為彈性伸縮盒子模型顯示  */
                -webkit-box-orient: vertical; /*  -webkit-box-orient 必須結(jié)合的屬性 ，設(shè)置或檢索伸縮盒對象的子元素的排列方式  */
                -webkit-line-clamp: 5; /*  -webkit-line-clamp用來限制在一個塊元素顯示的文本的行數(shù) */
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈        </div>
        <div class="div2" >
            嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿        </div>
    </body></html>

運行結(jié)果：

css div內(nèi)容超出隱藏如何實現(xiàn)

二、通過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() 方法可從已有的數(shù)組中返回選定的元素            myBox.innerHTML = mydemoHtml; // 填充到指定位置
        </script>
    </body></html>

運行結(jié)果：

css div內(nèi)容超出隱藏如何實現(xiàn)

以上就是“css div內(nèi)容超出隱藏如何實現(xiàn)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手