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

这个同时需要. 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>

效果:

参考链接:

单行省略号纯css解决方案

CSS基础：text-overflow:ellipsis溢出文本显示省略号的详细方法_CSS教程

巴特西

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

最新文章

热门文章