CSS教程

关注公众号 jb51net

关闭
网页制作 > CSS > CSS教程 >

css实现单行文本溢出显示省略号的示例代码

前端代码军师

可以使用CSS中的text-overflow属性来实现单行文本溢出显示省略号。

具体实现步骤如下:

    .ellipsis {
        width: 200px;
        /* 或者 */
        max-width: 200px;
    }
    .ellipsis {
        white-space: nowrap;
    }
    .ellipsis {
        overflow: hidden;
    }
    .ellipsis {
        text-overflow: ellipsis;
    }

完整的代码如下所示:

    .ellipsis {
        width: 200px;
        max-width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

这样就可以让单行文本溢出时显示省略号了。

到此这篇关于css实现单行文本溢出显示省略号的示例代码的文章就介绍到这了,更多相关css单行文本溢出显示省略号内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!