溢出
本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 41 课，共 76 课。
在 CSS 中，overflow 属性用于控制溢出元素框的内容会如何处理。当元素的内容过大，无法放入指定的宽度和高度范围内时，overflow 属性会决定是裁剪内容、添加滚动条，还是在元素边界之外显示溢出的内容。
以下是使用 overflow 属性的基本语法：
selector {
overflow: value;
}value：所需的溢出行为，可以是以下选项之一：
visible：这是默认值。溢出的内容会显示在元素框外，并可能与相邻元素重叠。
hidden：溢出的内容会被裁剪，其余内容不可见。
scroll：为元素添加滚动条（水平和垂直），让用户可以滚动查看溢出的内容。
auto：浏览器会根据内容和可用空间判断是否添加滚动条。通常只有在必要时才会添加滚动条。
例如：
div {
width: 200px;
height: 100px;
overflow: scroll;
}在这个示例中，所有宽度为 200px、高度为 100px 的 <div> 元素都会添加滚动条，以便查看溢出的内容。
你也可以使用 overflow-x 和 overflow-y 属性，分别控制水平方向和垂直方向的溢出行为：
.example {
overflow-x: hidden; /* 隐藏水平溢出的内容 */
overflow-y: scroll; /* 添加垂直滚动条 */
}
挑战
简单你会得到一个 HTML 文档，其中有一个 <div> 区块，里面包含一个带有长文本的段落（<p>）。你的任务是使用 overflow 属性控制溢出内容的显示方式。按照以下步骤操作：
- 编写一条 CSS 规则，用于选择
<div>元素。将width设为300px，将height设为150px，并将border设为1px solid black。 - 将
<div>的overflow属性设为scroll，为该元素添加滚动条。
亲手试试
<html>
<head>
<title>Overflow</title>
<style>
/* Write CSS rules here */
</style>
</head>
<body>
<div>
<p>This is a long text that will likely overflow its container. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
自我测试这节课包含一个小测验。开始学习即可作答，并记录你的进度。
使用 CSS 添加样式中的所有课
自己练习： Web 在线编辑器