Comment masquer le contenu CSS Div au-delà-Questions et réponses frontales-php.cn

Comment masquer le contenu CSS Div au-delà

藏色散人

Libérer： 2023-01-28 15:12:47

original

2693 Les gens l'ont consulté

Comment implémenter le contenu de CSS div au-delà du masquage : 1. Utilisez le code CSS "overflow: Hidden;" pour réaliser le contenu au-delà du masquage ; 2. Utilisez le code js "var myBox = document.getElementById('demo') ; var mydemoHtml = myBox. innerHTML.slice(0, 20) +'...';" Implémentez simplement le contenu au-delà du masquage.

Comment masquer le contenu CSS Div au-delà

L'environnement d'exploitation de ce tutoriel : système Windows 10, version css3, ordinateur DELL G3

Comment masquer le contenu css div au-delà de la limite cachée ?

CSS - La partie de débordement du texte dans le div est affichée avec des points de suspension

afin que la partie de débordement du texte dans le div soit affichée avec des points de suspension. Cela peut être résumé en deux solutions, une méthode consiste à. utilisez CSS pour le résoudre, et l'autre méthode est résolue par js.

1. Affichage via le contrôle CSS

Une ligne est affichée dans le div et la partie excédentaire est affichée avec des points de suspension

Plusieurs lignes sont affichées dans le div et la partie excédentaire est affichée avec des points de suspension

Code :

<!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>

Copier après la connexion

Résultat d'exécution ：

2. Contrôlez l'affichage via js

Code :

<!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>

Copier après la connexion

Résultats d'exécution :