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

LLL_LH

于 2018-01-23 16:41:03 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/LLL_liuhui/article/details/79141605

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>