css 实现省略号. text-overflow: ellipsis; 同时设置四个属性才可以.

weixin_30733003

于 2017-07-12 15:07:00 发布

阅读量106

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cbza/p/7155572.html

本文介绍如何使用CSS实现文本超出部分以省略号显示的效果。通过设置.text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 和width四个属性，可以确保当文本长度超过指定宽度时显示为省略号。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个同时需要. text-overflow ; overflow ; white-space ; width ; 四个属性才可以.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css实现省略号</title>
    <style type="text/css">


        /***超出长度显示省略号. 还需要设置width**/

        .ellipsis {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

        ul > li {
            border: 1px solid red;
            width: 200px;
        }

    </style>
</head>
<body>

    <ul>
        <li class="ellipsis" >测试一,测试一,测试一,测试一</li>
        <li class="ellipsis" >测试二</li>
        <li class="ellipsis" >测试三,测试三,测试三,测试三</li>
    </ul>

</body>
</html>