Home > Software engineering >  How to stop text overflow using CSS/HTML/Javascript - - - Overflow: Hidden not working as I want it
How to stop text overflow using CSS/HTML/Javascript - - - Overflow: Hidden not working as I want it

Time：01-22

So I've got the snippet down below, running good enough so that you can see the problem. ignoring the blank images and what not, the problem is dedicated to the .wrapper class

I've been practising grids and got the basics down arranging boxes as you can see :) What I'm trying to do is cut off text from these boxes to stop run off. What's the best way achieving this? Obviously here you can see me trying overflow hidden, but as you can see it still clips outside the border of the actual box for some reason. Perhaps this is a javascript fix? i'm not sure. Please help. Thank you!

   .box1 {
        font-size: 37px;
        font-weight: 900;
        padding-top: 5px;
        padding-bottom: 5px;
        align-items: center;
        width: 323px;
        max-height: 106px;
        border-radius: 5px;
        min-height: 50px;
        grid-column: 1/4;
        text-align: center;
        color: black;
        background: black;
        box-shadow: 0px 0px 5px rgb(122, 244, 255);
        border: 1px solid rgb(122, 244, 255);
        color: white;
        
     }
     .box2 {
        grid-column: 1 / 2;
        width: 220px;
        height: 247px;
        border-radius: 4px;
        box-shadow: 0px 0px 5px rgb(122, 244, 255);
        border: 1px solid rgb(122, 244, 255);
        color: blanchedalmond;
     }
     .box3 {
        font-size: 28px;
        width: 86px;
        max-height: 247px;
        word-wrap: break-word;
        grid-column: 2/3 ;
        color: rgba(0, 0, 0, 0.397);
        background: black;
        box-shadow: 0px 0px 5px rgb(122, 244, 255);
        border: 1px solid rgb(122, 244, 255);
        border-radius: 5px;
        color: white;
        padding-left: 10px;
     }
     .box4 {
        font-size: 28px;
        width: 314px;
        max-height: 108px;
        word-wrap: break-word;
        grid-column: 1/4;
        background: rgb(0, 0, 0);
        box-shadow: 0px 0px 5px rgb(122, 244, 255);
        border: 1px solid rgb(122, 244, 255);
        border-radius: 5px;
        padding-left: 10px;
     }
    .wrapper{
        display: grid;
        width: 325px;
        grid-template-columns: repeat(3, auto, auto);
        grid-template-rows: repeat(1, 1fr);
        gap: 6px;
        background: #000000;
        padding: 5px;
        border-radius: 10px;
        box-shadow: 0px 0px 5px rgb(122, 244, 255);
        border: 1.5px solid rgb(122, 244, 255);
        margin: 2.5px;
        color: white;
        overflow:hidden;
    }
    .main-content{
        color: black;
        background-color: rgb(10, 10, 10);
        min-height: 500px;
        overflow: hidden;
    }
    
    .megawrap{
        display: grid;
        padding:0px;
        align-items: center;
        justify-content: center;
        grid-template-columns: 50% 50%;
        width: 95%;
        min-height: 300px;
        row-gap: 20px;
        column-gap: 10px;
        padding-top:100px;
        margin: 0 auto;
        margin-left: 35px;
    }
    
    .date-type {
        position: absolute;
        left: 379px;
        top:275px;
        max-width: 94px;
    }
    }
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>III</title>
    <link rel="stylesheet" href="main.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <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=Dosis:wght@200;300;400;500;600;700;800&family=Roboto Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Rock 3D&display=swap" rel="stylesheet"> 
</head>

<body>
    <nav>
        <div >
            <div >
                <img  src="images/ulogo-white.jpg">
                <a  href="home.html"></a>
            </div>
           
            <div >
                <a href="about.html">About</a>
                <a href="events.html" >Events</a>
                <a href="login.html">Login</a>
                <a href="#">Dashboard</a>
            </div>
            <div >
                <button >
                    <span> </span>
                    <span></span>
                    <span></span>
                </button>
                <div >
                    <a href="events.html" >Events</a>
                    <a href="about.html" >About</a>
                    <a href="#" >Login</a>
                    <a href="#" >Dashboard</a>
                </div>
            </div>
        </div>
    </nav>

<div >
<div >
    <div >
        <div >Title</div>
        <img  src="images/7.jpg" alt="">
        <div class= "box3">
            box3 box 3 box3 box 3box3 box 3 box3 box 3 box3 box 3 box3 box 3
        </div>
        <div class= "box4">
           box4 box4 box4 box4box4box4box 4box4box4box 4box4 box box box box box box box box box box 
        </div>
    </div>
    <div >
        <div >Title</div>
        <img  src="images/7.jpg" alt="">
        <div class= "box3">
            box3 box 3 box3 box 3box3 box 3 box3 box 3 box3 box 3 box3 box 3
        </div>
        <div class= "box4">
           box4 box4 box4 box4box4box4box 4box4box4box 4box4 box box box box box box box box box box 
        </div>
    </div>
    <div >
        <div >Title</div>
        <img  src="images/7.jpg" alt="">
        <div class= "box3">
            box3 box 3 box3 box 3box3 box 3 box3 box 3 box3 box 3 box3 box 3
        </div>
        <div class= "box4">
           box4 box4 box4 box4box4box4box 4box4box4box 4box4 box box box box box box box box box box and what if box 4 is too long omg what we gunna doooo and what if box 4 is too long omg what we gunna doooo and what if box 4 is too long omg what we gunna doooo and what if box 4 is too long omg what we gunna doooo and what if box 4 is too long omg what we gunna doooo and what if box 4 is too long omg what we gunna doooo 
        </div>
    </div>
    <div >
        <div >Title</div>
        <img  src="images/7.jpg" alt="">
        <div class= "box3">
            box3 box 3 box3 box 3box3 box 3 box3 box 3 box3 box 3 box3 box 3
        </div>
        <div class= "box4">
           box4 box4 box4 box4box4box4box 4box4box4box 4box4 box box box box box box box box box box 
        </div>
    </div>
    <div >
        <div >Title is too long for the text</div>
        <img  src="images/7.jpg" alt="">
        <div class= "box3">
            box3 box 3 box3 box 3box3 box 3 box3 box 3 box3 box 3 box3 box 3
        </div>
        <div class= "box4">
           box4 box4 box4 box4box4box4box 4box4box4box 4box4 box box box box box box box box box box 
        </div>
    </div>
    
</div>

</div>

 <!-- Footer section -->
 <footer >
    <div >
        <div >
            <div >
                <p>Copyright © 2022 Ideas Imprint Inc. All Rights Reserved.</p>
                <p> Made with <span > ❤</span></p>
            </div>
        </div>
    </div>
    <!-- footer top -->

</footer>
   
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="main.js"></script>
</body>

</html>

CodePudding user response：

The overflow property is not inherited by child elements, so the elements that text is in don't have overflow: hidden. If you want it, you have to add it to your various .boxN classes:

.box1 {
        font-size: 37px;
        font-weight: 900;
        padding-top: 5px;
        padding-bottom: 5px;
        align-items: center;
        width: 323px;
        max-height: 106px;
        border-radius: 5px;
        min-height: 50px;
        grid-column: 1/4;
        text-align: center;
        color: black;
        background: black;
        box-shadow: 0px 0px 5px rgb(122, 244, 255);
        border: 1px solid rgb(122, 244, 255);
        color: white;
        overflow: hidden;
        
     }
     .box2 {
        grid-column: 1 / 2;
        width: 220px;
        height: 247px;
        border-radius: 4px;
        box-shadow: 0px 0px 5px rgb(122, 244, 255);
        border: 1px solid rgb(122, 244, 255);
        color: blanchedalmond;
        overflow: hidden;
     }
     .box3 {
        font-size: 28px;
        width: 86px;
        max-height: 247px;
        word-wrap: break-word;
        grid-column: 2/3 ;
        color: rgba(0, 0, 0, 0.397);
        background: black;
        box-shadow: 0px 0px 5px rgb(122, 244, 255);
        border: 1px solid rgb(122, 244, 255);
        border-radius: 5px;
        color: white;
        padding-left: 10px;
        overflow: hidden;
     }
     .box4 {
        font-size: 28px;
        width: 314px;
        max-height: 108px;
        word-wrap: break-word;
        grid-column: 1/4;
        background: rgb(0, 0, 0);
        box-shadow: 0px 0px 5px rgb(122, 244, 255);
        border: 1px solid rgb(122, 244, 255);
        border-radius: 5px;
        padding-left: 10px;
        overflow: hidden;
     }
    .wrapper{
        display: grid;
        width: 325px;
        grid-template-columns: repeat(3, auto, auto);
        grid-template-rows: repeat(1, 1fr);
        gap: 6px;
        background: #000000;
        padding: 5px;
        border-radius: 10px;
        box-shadow: 0px 0px 5px rgb(122, 244, 255);
        border: 1.5px solid rgb(122, 244, 255);
        margin: 2.5px;
        color: white;
        overflow:hidden;
    }
    .main-content{
        color: black;
        background-color: rgb(10, 10, 10);
        min-height: 500px;
        overflow: hidden;
    }
    
    .megawrap{
        display: grid;
        padding:0px;
        align-items: center;
        justify-content: center;
        grid-template-columns: 50% 50%;
        width: 95%;
        min-height: 300px;
        row-gap: 20px;
        column-gap: 10px;
        padding-top:100px;
        margin: 0 auto;
        margin-left: 35px;
    }
    
    .date-type {
        position: absolute;
        left: 379px;
        top:275px;
        max-width: 94px;
    }
    }
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>III</title>
    <link rel="stylesheet" href="main.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <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=Dosis:wght@200;300;400;500;600;700;800&family=Roboto Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Rock 3D&display=swap" rel="stylesheet"> 
</head>

<body>
    <nav>
        <div >
            <div >
                <img  src="images/ulogo-white.jpg">
                <a  href="home.html"></a>
            </div>
           
            <div >
                <a href="about.html">About</a>
                <a href="events.html" >Events</a>
                <a href="login.html">Login</a>
                <a href="#">Dashboard</a>
            </div>
            <div >
                <button >
                    <span> </span>
                    <span></span>
                    <span></span>
                </button>
                <div >
                    <a href="events.html" >Events</a>
                    <a href="about.html" >About</a>
                    <a href="#" >Login</a>
                    <a href="#" >Dashboard</a>
                </div>
            </div>
        </div>
    </nav>

<div >
<div >
    <div >
        <div >Title</div>
        <img  src="images/7.jpg" alt="">
        <div class= "box3">
            box3 box 3 box3 box 3box3 box 3 box3 box 3 box3 box 3 box3 box 3
        </div>
        <div class= "box4">
           box4 box4 box4 box4box4box4box 4box4box4box 4box4 box box box box box box box box box box 
        </div>
    </div>
    <div >
        <div >Title</div>
        <img  src="images/7.jpg" alt="">
        <div class= "box3">
            box3 box 3 box3 box 3box3 box 3 box3 box 3 box3 box 3 box3 box 3
        </div>
        <div class= "box4">
           box4 box4 box4 box4box4box4box 4box4box4box 4box4 box box box box box box box box box box 
        </div>
    </div>
    <div >
        <div >Title</div>
        <img  src="images/7.jpg" alt="">
        <div class= "box3">
            box3 box 3 box3 box 3box3 box 3 box3 box 3 box3 box 3 box3 box 3
        </div>
        <div class= "box4">
           box4 box4 box4 box4box4box4box 4box4box4box 4box4 box box box box box box box box box box and what if box 4 is too long omg what we gunna doooo and what if box 4 is too long omg what we gunna doooo and what if box 4 is too long omg what we gunna doooo and what if box 4 is too long omg what we gunna doooo and what if box 4 is too long omg what we gunna doooo and what if box 4 is too long omg what we gunna doooo 
        </div>
    </div>
    <div >
        <div >Title</div>
        <img  src="images/7.jpg" alt="">
        <div class= "box3">
            box3 box 3 box3 box 3box3 box 3 box3 box 3 box3 box 3 box3 box 3
        </div>
        <div class= "box4">
           box4 box4 box4 box4box4box4box 4box4box4box 4box4 box box box box box box box box box box 
        </div>
    </div>
    <div >
        <div >Title is too long for the text</div>
        <img  src="images/7.jpg" alt="">
        <div class= "box3">
            box3 box 3 box3 box 3box3 box 3 box3 box 3 box3 box 3 box3 box 3
        </div>
        <div class= "box4">
           box4 box4 box4 box4box4box4box 4box4box4box 4box4 box box box box box box box box box box 
        </div>
    </div>
    
</div>

</div>

 <!-- Footer section -->
 <footer >
    <div >
        <div >
            <div >
                <p>Copyright © 2022 Ideas Imprint Inc. All Rights Reserved (other than the CC-BY-SA granted to SE Inc. by posting on Stack Overflow).</p>
                <p> Made with <span > ❤</span></p>
            </div>
        </div>
    </div>
    <!-- footer top -->

</footer>
   
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="main.js"></script>
</body>

</html>

CodePudding user response：

Consider putting overflow: hidden in divs.

     .box3 {
        font-size: 28px;
        width: 86px;
        max-height: 247px;
        word-wrap: break-word;
        grid-column: 2/3 ;
        color: rgba(0, 0, 0, 0.397);
        background: black;
        box-shadow: 0px 0px 5px rgb(122, 244, 255);
        border: 1px solid rgb(122, 244, 255);
        border-radius: 5px;
        color: white;
        padding-left: 10px;
        overflow: hidden;   /* Add this */
     }
     .box4 {
        font-size: 28px;
        width: 314px;
        max-height: 108px;
        word-wrap: break-word;
        grid-column: 1/4;
        background: rgb(0, 0, 0);
        box-shadow: 0px 0px 5px rgb(122, 244, 255);
        border: 1px solid rgb(122, 244, 255);
        border-radius: 5px;
        padding-left: 10px;
        overflow: hidden;  /* Add this */
     }

Here is the fixed version:

.box1 {
        font-size: 37px;
        font-weight: 900;
        padding-top: 5px;
        padding-bottom: 5px;
        align-items: center;
        width: 323px;
        max-height: 106px;
        border-radius: 5px;
        min-height: 50px;
        grid-column: 1/4;
        text-align: center;
        color: black;
        background: black;
        box-shadow: 0px 0px 5px rgb(122, 244, 255);
        border: 1px solid rgb(122, 244, 255);
        color: white;
        
     }
     .box2 {
        grid-column: 1 / 2;
        width: 220px;
        height: 247px;
        border-radius: 4px;
        box-shadow: 0px 0px 5px rgb(122, 244, 255);
        border: 1px solid rgb(122, 244, 255);
        color: blanchedalmond;
     }
     .box3 {
        font-size: 28px;
        width: 86px;
        max-height: 247px;
        word-wrap: break-word;
        grid-column: 2/3 ;
        color: rgba(0, 0, 0, 0.397);
        background: black;
        box-shadow: 0px 0px 5px rgb(122, 244, 255);
        border: 1px solid rgb(122, 244, 255);
        border-radius: 5px;
        color: white;
        padding-left: 10px;
        overflow: hidden;
     }
     .box4 {
        font-size: 28px;
        width: 314px;
        max-height: 108px;
        word-wrap: break-word;
        grid-column: 1/4;
        background: rgb(0, 0, 0);
        box-shadow: 0px 0px 5px rgb(122, 244, 255);
        border: 1px solid rgb(122, 244, 255);
        border-radius: 5px;
        padding-left: 10px;
        overflow: hidden;
     }
    .wrapper{
        display: grid;
        width: 325px;
        grid-template-columns: repeat(3, auto, auto);
        grid-template-rows: repeat(1, 1fr);
        gap: 6px;
        background: #000000;
        padding: 5px;
        border-radius: 10px;
        box-shadow: 0px 0px 5px rgb(122, 244, 255);
        border: 1.5px solid rgb(122, 244, 255);
        margin: 2.5px;
        color: white;
        overflow:hidden;
    }
    .main-content{
        color: black;
        background-color: rgb(10, 10, 10);
        min-height: 500px;
        overflow: hidden;
    }
    
    .megawrap{
        display: grid;
        padding:0px;
        align-items: center;
        justify-content: center;
        grid-template-columns: 50% 50%;
        width: 95%;
        min-height: 300px;
        row-gap: 20px;
        column-gap: 10px;
        padding-top:100px;
        margin: 0 auto;
        margin-left: 35px;
    }
    
    .date-type {
        position: absolute;
        left: 379px;
        top:275px;
        max-width: 94px;
    }
    }
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>III</title>
    <link rel="stylesheet" href="main.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <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=Dosis:wght@200;300;400;500;600;700;800&family=Roboto Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Rock 3D&display=swap" rel="stylesheet"> 
</head>

<body>
    <nav>
        <div >
            <div >
                <img  src="images/ulogo-white.jpg">
                <a  href="home.html"></a>
            </div>
           
            <div >
                <a href="about.html">About</a>
                <a href="events.html" >Events</a>
                <a href="login.html">Login</a>
                <a href="#">Dashboard</a>
            </div>
            <div >
                <button >
                    <span> </span>
                    <span></span>
                    <span></span>
                </button>
                <div >
                    <a href="events.html" >Events</a>
                    <a href="about.html" >About</a>
                    <a href="#" >Login</a>
                    <a href="#" >Dashboard</a>
                </div>
            </div>
        </div>
    </nav>

<div >
<div >
    <div >
        <div >Title</div>
        <img  src="images/7.jpg" alt="">
        <div class= "box3">
            box3 box 3 box3 box 3box3 box 3 box3 box 3 box3 box 3 box3 box 3
        </div>
        <div class= "box4">
           box4 box4 box4 box4box4box4box 4box4box4box 4box4 box box box box box box box box box box 
        </div>
    </div>
    <div >
        <div >Title</div>
        <img  src="images/7.jpg" alt="">
        <div class= "box3">
            box3 box 3 box3 box 3box3 box 3 box3 box 3 box3 box 3 box3 box 3
        </div>
        <div class= "box4">
           box4 box4 box4 box4box4box4box 4box4box4box 4box4 box box box box box box box box box box 
        </div>
    </div>
    <div >
        <div >Title</div>
        <img  src="images/7.jpg" alt="">
        <div class= "box3">
            box3 box 3 box3 box 3box3 box 3 box3 box 3 box3 box 3 box3 box 3
        </div>
        <div class= "box4">
           box4 box4 box4 box4box4box4box 4box4box4box 4box4 box box box box box box box box box box and what if box 4 is too long omg what we gunna doooo and what if box 4 is too long omg what we gunna doooo and what if box 4 is too long omg what we gunna doooo and what if box 4 is too long omg what we gunna doooo and what if box 4 is too long omg what we gunna doooo and what if box 4 is too long omg what we gunna doooo 
        </div>
    </div>
    <div >
        <div >Title</div>
        <img  src="images/7.jpg" alt="">
        <div class= "box3">
            box3 box 3 box3 box 3box3 box 3 box3 box 3 box3 box 3 box3 box 3
        </div>
        <div class= "box4">
           box4 box4 box4 box4box4box4box 4box4box4box 4box4 box box box box box box box box box box 
        </div>
    </div>
    <div >
        <div >Title is too long for the text</div>
        <img  src="images/7.jpg" alt="">
        <div class= "box3">
            box3 box 3 box3 box 3box3 box 3 box3 box 3 box3 box 3 box3 box 3
        </div>
        <div class= "box4">
           box4 box4 box4 box4box4box4box 4box4box4box 4box4 box box box box box box box box box box 
        </div>
    </div>
    
</div>

</div>

 <!-- Footer section -->
 <footer >
    <div >
        <div >
            <div >
                <p>Copyright © 2022 Ideas Imprint Inc. All Rights Reserved.</p>
                <p> Made with <span > ❤</span></p>
            </div>
        </div>
    </div>
    <!-- footer top -->

</footer>
   
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="main.js"></script>
</body>

</html>

CodePudding user response：

the overflow:hidden style has been added only to the wrapper div and not it's children i.e. #box-N

they wouldn't inherit overflow style so you either need to add a .box class or add overflow:hidden style to all the divs

CodePudding user response：

.box4{

 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 3;
}

https://www.youtube.com/watch?v=bHn0WHqNnj4 Booom. I figured it out thanks to this video.

Thanks anyways, I'll upvote the comments for effort.

Page link：https//www.codepudding.com/Softwareengineering/272571.html

Prev:populate select element from state in react
Next:ReactJS using undefined variable even after checking for it not to be undefined
  •  Tags：  
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding