text-overflow属性的clip值和ellipsis值的区别

最新推荐文章于 2025-02-18 12:08:30 发布

　　初夏 ﻬ

最新推荐文章于 2025-02-18 12:08:30 发布

阅读量1k

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/qq_44329870/article/details/109523936

版权

本文探讨了CSS中的text-overflow属性，重点解释了clip和ellipsis两个值的区别。clip值会在内容超出容器宽度时进行裁切，而ellipsis值则会显示省略号来表示内容被隐藏。要实现ellipsis效果，需结合使用white-space: nowrap; overflow: hidden;。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

text-overflow属性

clip：当字数超过容器宽度时，剩余内容将被隐藏，直接从超出的位置进行裁切。
ellipsis：当字数超过容器宽度时，剩余内容也将被隐藏，但是会显示一个省略号（…）。（ 注：需要和white-space:nowrap; overflow:hidden;同时使用才能看到省略号的效果）

举例代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .text
        {
            width: 150px;
            height: 20px;
            border: 1px solid red;
            overflow: hidden;
            white-space: nowrap;
            /*text-overflow: clip;*/
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div class="text">
        这是一行文字这是一行文字这是一行文字
    </div>
</body>
</html>