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

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

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

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

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

实现单行文本省略

<!DOCTY PE  ht ML >
<html>
    <head>
        < ;m eta charset="UTF-8">
        <t IT le></title>
        <style>
            div {
                m arg in:0 auto ;
                width:300px;
                color:  red ;
                overflow: hidden;
                text-overflow: ellipsis;
                white -s pace: nowra p; 
            }
        </style>
    </head>
    <body>
        <div>单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略</div>
    </body>
</html>

结果

实现多行文本省略

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div {
                mar gin : 0 auto;
                width: 300px;
                color: red;
                dis play : -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-cl am p: 3;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div>多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略</div>
    </body>
</html>

结果

总结

以上是为你收集整理的 css如何实现文本多行省略号全部内容，希望文章能够帮你解决 css如何实现文本多行省略号所遇到的问题。

如果觉得网站内容还不错，推荐好友。

查看更多关于css如何实现文本多行省略号的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did199485

更新时间：2023-04-27 阅读：39次