CSS divコンテンツを非表示にする方法-フロントエンドQ&A-php.cn

CSS divコンテンツを非表示にする方法

藏色散人

リリース： 2023-01-28 15:12:47

オリジナル

2711 人が閲覧しました

非表示を超えて CSS div のコンテンツを実装する方法: 1. CSS コード「overflow: hidden;」を使用して、非表示を超えたコンテンツを実現します。2. JS コード「var myBox = document.getElementById( 'demo'); var mydemoHtml = myBox.innerHTML.slice(0, 20) '...';" 非表示を超えてコンテンツを実装するだけです。

CSS divコンテンツを非表示にする方法

このチュートリアルの動作環境: Windows 10 システム、css3 バージョン、DELL G3 コンピューター

コンテンツを非表示にする方法css divが制限を超えていますか?

CSS——div 内のテキストのオーバーフロー部分を省略記号で表示します

div 内のテキストのオーバーフロー部分が表示されるようにしますこれは 2 つの解決策に要約できます。1 つは CSS を使用して解決する方法で、もう 1 つの方法は js を使用して解決することです。

1. CSS コントロールによる表示

div 内は 1 行表示、余分な部分は省略記号で表示

複数表示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>

ログイン後にコピー

実行結果:

2. 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>

ログイン後にコピー

実行結果: