Html Question posted in
Some basic documentation can be found here.

Html – How to stop a container’s elements from overflowing the parent container

I have a question: how to make the <p> in this code stop overflowing? I want it to fill the designated space in section.textcontainer (break when no more space for the text remains).
Please refer to the snippet below.

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: white;
    padding: 3vw;
}

section.textcontainer{
    font-family: Raleway;
    display: block;
    position: absolute;
    margin-top: 0;
    margin-left: 2vw;
}
section.textcontainer > h1{
    font-weight: bold;
    margin: 0;
    font-size: 2vw;
    margin-bottom: 0.8vw;
}
section.textcontainer > p{
    font-size: 1vw;
    margin: 0;
    white-space: pre-line;
}

section.defaultsection *{
    display: inline-block;
}

img.iconimage{
    width: 10vw;
    height: 10vw;
}

header img{
    display: block;
    margin: auto;
    text-align: center;
}

p.sub{
    font-family: 'Chivo Mono';
    font-style: italic;
    font-weight: light;
    font-size: 1.5vw;
    margin: 0;
    text-align: center;
    color: whitesmoke;
}
footer{
    position: absolute;
    bottom: 0px;
    padding: 2vh 2vw;
}
header{
    position: relative;
    border-bottom: 3px white solid;
    background-color: white;
}

@media only screen and (max-width: 768px){
    img{
      width: calc(15vw + 2.0vh);
    }
    h1{
        font-size: 12vw;
        margin-top: calc(34vh - 12vw);
    }
    p{
        font-size: calc(1.5vw + 1vh);
        font-weight: bold;
    }
}
@media only screen and (max-width: 768px) and (min-width: 500px){
    h1{
        font-size: calc(12vw - 3vh);
        margin-top: 30vh;
    }
    p{
        font-size: calc(1vw + 0.5vh)
    }
}
@media only screen and (min-width: 768px){
    img{
        max-width: 20vh;
    }
}
<!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;
}

section.textcontainer{
    font-family: Raleway;
    display: block;
    position: absolute;
    margin-top: 0;
    margin-left: 2vw;
}
section.textcontainer > h1{
    font-weight: bold;
    margin: 0;
    font-size: 2vw;
    margin-bottom: 0.8vw;
}
section.textcontainer > p{
    font-size: 1vw;
    margin: 0;
    white-space: pre-line;
}

section.defaultsection *{
    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>
                        <br>
                        <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>
        </main>
    </body>
</html>

White-space doesn’t fix it.

Tags:

2

Answers


  1. 0

    The issue is that you are not giving the position relative to the section.defaultsection. Because of it, the section.textcontainer is taking body as a parent which gives a impression of that text overflowing the box. Give CSS:-

    section.defaultsection{
   position: relative;
}
    Login or Signup to reply.
  2. 0

    You need to set a max-width then do overflow: hidden

    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: white;
    padding: 3vw;
}

section.textcontainer{
    font-family: Raleway;
    display: block;
    position: absolute;
    margin-top: 0;
    margin-left: 2vw;
    max-width: 96px;
    overflow: hidden;
}
section.textcontainer > h1{
    font-weight: bold;
    margin: 0;
    font-size: 2vw;
    margin-bottom: 0.8vw;
}
section.textcontainer > p{
    font-size: 1vw;
    margin: 0;
    white-space: pre-line;
    
}

section.defaultsection *{
    display: inline-block;
}

img.iconimage{
    width: 10vw;
    height: 10vw;
}

header img{
    display: block;
    margin: auto;
    text-align: center;
}

p.sub{
    font-family: 'Chivo Mono';
    font-style: italic;
    font-weight: light;
    font-size: 1.5vw;
    margin: 0;
    text-align: center;
    color: whitesmoke;
}
footer{
    position: absolute;
    bottom: 0px;
    padding: 2vh 2vw;
}
header{
    position: relative;
    border-bottom: 3px white solid;
    background-color: white;
}

@media only screen and (max-width: 768px){
    img{
      width: calc(15vw + 2.0vh);
    }
    h1{
        font-size: 12vw;
        margin-top: calc(34vh - 12vw);
    }
    p{
        font-size: calc(1.5vw + 1vh);
        font-weight: bold;
    }
}
@media only screen and (max-width: 768px) and (min-width: 500px){
    h1{
        font-size: calc(12vw - 3vh);
        margin-top: 30vh;
    }
    p{
        font-size: calc(1vw + 0.5vh)
    }
}
@media only screen and (min-width: 768px){
    img{
        max-width: 20vh;
    }
}
    <!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>

    </style>
    </head>
    <body>
        <main>
                <section class="defaultsection">
                    <img src="RESOURCES/wheatmini.png" class="iconimage" alt="zboże">
                    <section class="textcontainer">
                        <h1>Alergie: pewniaki</h1>
                        <br>
                        <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>
        </main>
    </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search