在 web 开发中，我们经常会遇到内容超出容器大小的情况，这时就需要使用 overflow 属性来控制内容的溢出效果。overflow 属性可以设置在任何元素上，包括 div、span、p 等。
overflow 属性的取值
overflow 属性有四个取值，分别是：
visible：默认值，内容不会被修剪，会呈现在容器之外。hidden：内容会被修剪，超出容器的部分将被隐藏。scroll：内容会被修剪，但浏览器会显示滚动条以便查看被修剪的内容。auto：如果内容被修剪，则浏览器会显示滚动条以便查看被修剪的内容。
示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----- --------------- ---------------------------- -------------------
--------------- ---------------
-------
---------- -
------ ------
------- ------
------- --- ----- -----
--------- -------
-
-------- -
------ ------
------- ------
----------------- --------
-
--------
-------
------
---- ------------------
---- ----------------
----- ----- ----- --- ----- ----------- ---------- ----- --- -- ------------ ---- ----- ---- ----- ----- --- ---------- ----------- ---------- -----------
------
------
-------
-------在上面的示例代码中，我们定义了一个容器 .container，设置了宽高为 200px，并且使用 overflow: hidden; 来隐藏内容溢出的部分。内容 .content 的宽高为 300px，超出了容器的大小，但由于设置了 overflow: hidden;，所以超出的部分会被隐藏。
总结
通过 overflow 属性，我们可以灵活控制内容的溢出效果，使页面看起来更加美观。在实际开发中，根据具体需求选择合适的 overflow 取值，可以提升用户体验。