css div内容超出隐藏如何实现

2023-07-05 01:07:04 721人浏览安东尼

摘要

今天小编给大家分享一下CSS div内容超出隐藏如何实现的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。css div内容超出

今天小编给大家分享一下CSS div内容超出隐藏如何实现的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

css div内容超出隐藏的实现方法：1、通过css代码“overflow: hidden;”实现内容超出隐藏；2、通过js代码“var myBox = document.getElementById('demo');var mydemohtml = myBox.innerHTML.slice(0, 20) +'......';”实现内容超出隐藏即可。

CSS——div内文字的溢出部分用省略号显示

使得div内文字的溢出部分用省略号显示，可归纳为两种解决办法，一种方法是用CSS解决，另一种方法是js解决。

一、通过CSS控制显示

div内显示一行，超出部分用省略号显示

div内显示多行，超出部分用省略号显示

代码：

<!DOCTYPE html><html>
    <head>
        <meta charset="utf-8">
        <title>例子</title>
        <style>
            
            .div1{
                height: 100px;
                width:100px;
                background:green; 
                text-overflow: ellipsis;   
                white-space: nowrap;    
                overflow: hidden; 
            }
            
            .div2{
                
                width:100px;
                background:yellowgreen; 
                display: -WEBkit-box;  
                -webkit-box-orient: vertical; 
                -webkit-line-clamp: 5; 
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈        </div>
        <div class="div2" >
            嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿        </div>
    </body></html>

运行结果：

css div内容超出隐藏如何实现

二、通过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>