如何阻止容器内<p>元素溢出父容器？前端布局求助

问题根源 #

1. section.textcontainer 采用绝对定位但未设置宽度，容器宽度由文本内容撑开，无法被父容器defaultsection约束
2. section.defaultsection * { display: inline-block; } 全局设置让所有子元素（包括textcontainer）变为行内块元素，破坏了正常的块级布局约束
3. 缺少明确的宽度限制，导致white-space属性无法生效

修复方案 #

• 给section.textcontainer设置宽度限制，使其在父容器范围内
• 移除或调整全局的inline-block设置，避免干扰文本容器的布局
• 确保文本元素的换行行为正常（可保留white-space: pre-line用于处理换行符，或使用默认normal）

修改后的完整代码 #

<!doctype html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Informacje o alergiach opracowane przez członków klasy 1A.">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap" rel="stylesheet">
    <link rel="icon" href="RESOURCES/promise.png">
    <meta name="subject" content="Allergy & history student project">
    <meta name="language" content="pl">
    <meta name="url" content="https://shatterwares.com">
    <meta name="coverage" content="Worldwide">
    <meta name="rating" content="General">
    <meta name='HandheldFriendly' content='True'>
    <title>Corridor</title>
    <style>
        body{
            background: url('../RESOURCES/cyberback.png') no-repeat;
            background-size: 100vw 100vh;
            margin: 0;
        }

        section.defaultsection{
            margin: 5% 30%;
            width: calc(40vw - 1px);
            border: white 1px solid;
            border-radius: 20vh;
            background-color: red;
            padding: 3vw;
            /* 给父容器设置相对定位，让绝对定位的textcontainer以它为参照 */
            position: relative;
        }

        section.textcontainer{
            font-family: Raleway;
            position: absolute;
            top: 3vw;
            left: calc(3vw + 60px); /* 左边距=父容器padding+图片宽度，可根据实际图片尺寸调整 */
            /* 设置最大宽度，确保文本不会溢出父容器 */
            max-width: calc(40vw - 6vw - 60px);
        }
        section.textcontainer > h1{
            font-weight: bold;
            margin: 0;
            font-size: 2vw;
            margin-bottom: 0.8vw;
        }
        section.textcontainer > p{
            font-size: 1vw;
            margin: 0;
            /* 使用默认normal即可自动换行，若需要保留换行符可继续用pre-line */
            white-space: normal;
        }

        /* 移除全局inline-block设置，改为仅给图片设置 */
        .iconimage {
            display: inline-block;
        }
    </style>
</head>
<body>
    <main>
        <section class="defaultsection">
            <img src="RESOURCES/wheatmini.png" class="iconimage" alt="zboże">
            <section class="textcontainer">
                <h1>Alergie: pewniaki</h1>
                <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
            </section>
        </section>
    </main>
    <footer>
        <p class="sub">placeholder</p>
    </footer>
</body>
</html>

关键修改说明 #

1. 给section.defaultsection添加position: relative，让绝对定位的textcontainer以它为定位参照
2. 给section.textcontainer设置max-width，限制其宽度在父容器范围内，左边距根据图片尺寸调整
3. 移除全局的section.defaultsection * { display: inline-block; }，仅给图片单独设置display: inline-block
4. 将p元素的white-space改为normal（或保留pre-line，只要容器宽度正确即可生效）

内容的提问来源于stack exchange，提问作者KawkaGaming