CSS div 콘텐츠를 숨기는 방법-프런트엔드 Q&A-php.cn

CSS div 콘텐츠를 숨기는 방법

藏色散人

풀어 주다： 2023-01-28 15:12:47

원래의

2693명이 탐색했습니다.

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에 있는 텍스트의 오버플로 부분이 줄임표로 표시됩니다. 두 가지 해결 방법으로 요약할 수 있습니다. CSS를 사용하여 해결하고 다른 방법은 js로 해결합니다.

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

로그인 후 복사

실행 결과:

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>

로그인 후 복사

실행 결과: