CSS06-文本溢出

最新推荐文章于 2025-03-24 00:47:58 发布

sdsjx01

最新推荐文章于 2025-03-24 00:47:58 发布

阅读量198

点赞数

分类专栏： CSS 文章标签：文本溢出单行多行

本文链接：https://blog.youkuaiyun.com/sdsjx01/article/details/89467306

版权

CSS 专栏收录该内容

9 篇文章

订阅专栏

项目中常常有这种需要我们对溢出文本进行"..."显示的操作，单行多行的情况都有（具体几行得看设计师心情了），这篇博客是我个人对这种情况解决办法的归纳，欢迎各路英雄指教。

文本溢出省略号显示(条件):
    1:不能让文本换行 white-space:nowrap  文本不换行
    2:让超出的文本隐藏  overflow:hidden   让溢出的文本隐藏
    3:让隐藏的文本省略号形式显示  text-overflow:ellipsis   让隐藏文本以省略号形式显示
    4:盒子的宽度!!!

案例:

单行文字溢出打点:

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        a,u{
            text-decoration: none;
        }
        ul,li,ol{
            list-style: none;
        }
        #con li a{
            width: 100px;
            display: block;
            background: #52ff5c;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
<body>
    <div id="con">
        <ul>
            <li>
                <a href="#">文本溢出显示省略号文本溢出显示省略号文本溢出显示省略号</a>
            </li>
        </ul>

    </div>
</body>

多行文本省略号显示:

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        a,u{
            text-decoration: none;
        }
        ul,li,ol{
            list-style: none;
        }
        #con li a{
            width: 100px;
            display: block;
            background: #52ff5c;
            /*单行文本不换行*/
            overflow: hidden;
            /* 以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本*/
            text-overflow: ellipsis;
            /*将对象作为弹性伸缩盒子模型显示*/
            display: -webkit-box;
            /*用来限制在一个块元素显示的文本的行数,这是一个不规范的属性*/
            -webkit-line-clamp: 3;
            /*设置或检索伸缩盒对象的子元素的排列方式*/
            -webkit-box-orient: vertical;
        }
    </style>
<body>
    <div id="con">
        <ul>
            <li>
                <a href="#">多行文本溢出显示省略号文本溢出显示省略号文本溢出显示省略号</a>
            </li>
        </ul>

    </div>
</body>