zoukankan      html  css  js  c++  java
  • 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;  /* 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>

    运行结果:

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

     运行结果:

  • 相关阅读:
    新一代MQ apache pulsar的架构与核心概念
    Flutter使用fluwx实现微信分享
    BZOJ3622 已经没有什么好害怕的了 动态规划 容斥原理 组合数学
    NOIP2016提高组Day1T2 天天爱跑步 树链剖分 LCA 倍增 差分
    Codeforces 555C Case of Chocolate 其他
    NOIP2017提高组Day2T3 列队 洛谷P3960 线段树
    NOIP2017提高组Day2T2 宝藏 洛谷P3959 状压dp
    NOIP2017提高组Day1T3 逛公园 洛谷P3953 Tarjan 强连通缩点 SPFA 动态规划 最短路 拓扑序
    Codeforces 873F Forbidden Indices 字符串 SAM/(SA+单调栈)
    Codeforces 873E Awards For Contestants ST表
  • 原文地址:https://www.cnblogs.com/FHC1994/p/11502929.html
Copyright © 2011-2022 走看看