css div内容超出隐藏怎么实现

前端技术 2024/03/18 CSS

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

css div内容超出隐藏怎么实现

本教程操作环境：Windows10系统、css3版、DELL G3电脑

css div内容超出隐藏怎么实现？

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

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

一、通过CSS控制显示

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

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

代码：

nbsp;html>
    
        <meta>
        <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>
    
    
        <div>
            哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈        </div>
        <div>
            嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿        </div>
    

运行结果：

二、通过js控制显示

 代码：

nbsp;html&gt;
    
        <meta>
        <title>实例</title>
        <style>
            .mydiv {
                width: 150px;
                height: 200px;
                background: pink;
            }
        </style>
    
    
        <div>通过js操作的方法显示文字，使得末尾的文字省略号显示</div>
        <script>
            var myBox = document.getElementById(&#39;demo&#39;); //直接用id获取domo对象
            var mydemoHtml = myBox.innerHTML.slice(0, 20) + &#39;......&#39;; // slice() 方法可从已有的数组中返回选定的元素            myBox.innerHTML = mydemoHtml; // 填充到指定位置
        </script>
    

 运行结果：

推荐学习：《》

 

以上就是css div内容超出隐藏怎么实现的详细内容，更多请关注本站点其它相关文章！

本文地址：https://www.stayed.cn/item/26978

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案