欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

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

程序员文章站 2022-04-04 21:51:13
...

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

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

本教程操作环境：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>

结果

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

实现多行文本省略

<!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视频教程

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

相关标签： css 多行省略号

上一篇： composer 不能只更新某个文件吗？

下一篇： 淘宝css是什么意思

推荐阅读