css3实现文字溢出省略号（…）显示

最新推荐文章于 2024-08-03 20:42:48 发布

王姑娘本人

最新推荐文章于 2024-08-03 20:42:48 发布

阅读量5.5k

点赞数

分类专栏： css3 文章标签： css3 代码文档

本文链接：https://blog.csdn.net/wm1029218932/article/details/48261561

版权

css3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

css3实现文字溢出省略号（…）显示，如下代码片段

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
    p{
        width:200px;
        height:30px;
        font-size:16px;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        -o-text-overflow:ellipsis;
        -webkit-text-overflow:ellipsis;
        -moz-text-overflow:ellipsis;
    }
</style>
</head>

<body>
    <p>css3实现单行文本溢出会显示省略号（...）</p>
</body>
</html>

overflow:hidden;//文本溢出隐藏
white-space:nowrap;// 文本不会换行，文本会在在同一行上继续，直到遇到 <br/> 标签为止。
text-overflow:ellipsis;//溢出文本显示省略号
这三个css设置必须同时存在，才会实现单行文本溢出显示省略号的效果