js overflow

// 示例代码：处理元素溢出（overflow）

// HTML 结构
/*
<div id="container" style="width: 200px; height: 100px; border: 1px solid black; overflow: hidden;">
    <p>这是一个用于演示溢出效果的段落。内容超出容器时，将根据 CSS 的 overflow 属性进行处理。</p>
</div>
*/

// JavaScript 代码
const container = document.getElementById('container');
const paragraph = container.querySelector('p');

// 动态改变段落内容以触发溢出效果
paragraph.textContent = '这是一个用于演示溢出效果的段落。内容超出容器时，将根据 CSS 的 overflow 属性进行处理。这段文字会被不断重复以确保溢出发生。' + 
                        '这是一个用于演示溢出效果的段落。内容超出容器时，将根据 CSS 的 overflow 属性进行处理。这段文字会被不断重复以确保溢出发生。';

// 设置不同的 overflow 样式来观察效果
function setOverflowStyle(style) {
    container.style.overflow = style;
}

// 示例：设置为 scroll，显示滚动条
setOverflowStyle('scroll');

// 解释说明：
// 1. `overflow: hidden` 会隐藏超出容器的内容。
// 2. `overflow: scroll` 会在内容超出容器时显示滚动条，无论是否需要。
// 3. `overflow: auto` 会在内容超出容器时自动显示滚动条。
// 4. `overflow: visible` 会让超出容器的内容保持可见，默认行为。