控制单行文本，溢出属性/省略号显示：

最新推荐文章于 2022-09-30 20:06:39 发布

console.log("hair")

最新推荐文章于 2022-09-30 20:06:39 发布

阅读量226

点赞数 1

文章标签： html5

本文链接：https://blog.youkuaiyun.com/qq_39115357/article/details/105232978

版权

本文详细介绍了CSS中溢出属性的使用方法，包括overflow、overflow-x、overflow-y的设置，以及如何实现单行文本溢出时显示省略号的效果。通过具体属性值如auto、scroll、hidden等，帮助读者掌握不同场景下溢出内容的显示控制。

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

溢出属性（控制内容溢出时候的显示方式）：

    overflow属性：
        auto      当内容超出的时候有滚动条，没有超出的时候没有滚动条
        scroll    添加滚动条
        hidden    溢出隐藏！
        inherit   继承！
    拓展： 
        overflow-x : hidden;    水平方向隐藏
        overflow-y : hidden;    垂直方向隐藏
        控制单行文本，溢出 省略号显示：
    1：white-space:nowrap;      不换行
    2：overflow:hidden;         溢出的内容隐藏。
    3：text-overflow:ellipsis   溢出的内容省略号显示
    4：容器要有宽度！！！