css实现溢出隐藏并显示省略号

原创于 2018-01-23 16:41:03 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种使用CSS实现的文本溢出效果，通过限制文本宽度并使用省略号来展示超出部分的内容。

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

<style>
    div {
        width: 150px;
        border: 1px solid #ccc;
        white-space: nowrap;  //超出不换行
        overflow: hidden;   //超出隐藏，其余内容不可见
        text-overflow: ellipsis;   //文本溢出后用省略号显示
    }
</style>
<div>文字文字文字文字文字文字文字文字</div>