css如何实现文本多行省略号

css实现文本多行省略号的方法：1、使用【text-overflow:ellipsis】属性实现单行文本省略；2、使用属性【webkit-box-orient: vertical】实现多行文本省略。

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

css实现文本多行省略号的方法：

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。

实现单行文本省略

!DOCTYPE htML>
    html>
        head>
            meta charset="UTF-8">
            tITle>
    /title>
            style>
            div {
                    margin:0 auto ;
                    width:300px;
                    color: red;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
            }
            /style>
        /head>
        body>
            div>
    单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略/div>
        /body>
    /html>
    

结果

实现多行文本省略

!DOCTYPE html>
    html>
        head>
            meta charset="UTF-8">
            title>
    /title>
            style>
            div {
                    margin: 0 auto;
                    width: 300px;
                    color: red;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                    overflow: hidden;
            }
            /style>
        /head>
        body>
            div>
    多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略/div>
        /body>
    /html>
    

结果

相关教程推荐：CSS视频教程

以上就是css如何实现文本多行省略号的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！