调整窗口大小时文本溢出到其他div

基础概念

当调整浏览器窗口大小时，如果某个元素的宽度不足以容纳其内部的文本内容，文本可能会溢出到其他元素（如div）中。这种情况通常发生在响应式设计不足或布局不够灵活的情况下。

类型

水平溢出：文本超出元素的左右边界。
垂直溢出：文本超出元素的上下边界。

应用场景

网页设计：确保在不同设备上都能提供良好的用户体验。
移动应用：适应不同屏幕尺寸和分辨率。

问题原因及解决方法

问题原因

固定宽度：元素使用了固定宽度，导致在窗口缩小时无法适应。
缺少溢出处理：没有使用CSS属性来处理溢出情况。
布局不够灵活：使用了不支持响应式设计的布局方式。

解决方法

使用百分比宽度：
使用百分比宽度：
使用Flexbox布局：
使用Flexbox布局：
使用Grid布局：
使用Grid布局：
处理溢出：
处理溢出：
媒体查询：
媒体查询：

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Text Example</title>
    <style>
        .container {
            width: 80%;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #000;
        }
        .text {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 100%;
        }
        @media (max-width: 600px) {
            .container {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="text">This is a long text that should not overflow to other divs when the window is resized.</div>
    </div>
</body>
</html>