Bollate

HTML

[ANSWERED] html – Move Child’s Overflow To Next Row If Current Row’s Width Too Narrow

By

Nov 20, 2022 , ,

Solution 1 :

Here is a very crazy idea relying on inline element and linear-gradient.

#container {
  margin: 20px auto;
  width: 450px;
  display:flex;
  flex-wrap:wrap;
  position:relative;
}
#container > * {
  width:33.33%;
  height: 150px;
  background: #FFEB3B;
}
#container > *:nth-child(odd){
  background: #8BC34A;
}

#container > span {
  /* cover all the container */
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  /* */
  background:none!important;
  line-height:150px; /* same as height here */   
  font-size: 130px; /* a big font-size to cover more area */
  overflow:hidden; /* hide extra overflow of the "phantom" text */
  text-align:justify; /* we justify the "phantom" text to span until the end */
}
/* the below inline element will wrap different lines and will cover all the grid
   and since the line-height = height, we will have a perfect illusion of a continuous line
   over the different cells */
#container > span span {
  background:
      linear-gradient(var(--c,blue) 0 0)     /* the color */
      calc(var(--left)*150px)  var(--top)/   /* the position */
      calc(var(--width)*150px) var(--height) /* the size */
      no-repeat; 
}
#container > span span:before {
   content:". . . . . . . . . ."; /* phantom text to fill the inline element*/
   font-size: 300px; /* big enough to avoid having a long phantom text but not too much to make sure there is at least two characters per line to trigger the justify */
   line-height:0; /* we obey the to above line-height */
   visibility:hidden; /* we don't need to see the text */
}
<div id="container">
  <!-- calender element  --->
  <div><b>1</b></div>
  <div><b>2</b></div>
  <div><b>3</b></div>
  <div><b>4</b></div>
  <div><b>5</b></div>
  <div><b>6</b></div>
  <div><b>7</b></div>
  <div><b>8</b></div>
  <div><b>9</b></div>
  <!-- line elements -->
  <span style="--left:0;--top:20px;--height:20px;--width:4"><span></span></span>
  <span style="--left:2;--top:40px;--height:40px;--width:4;--c:red;"><span></span></span>
  <span style="--left:4;--top:100px;--height:10px;--width:3;--c:black"><span></span></span>
  <span style="--left:0;--top:90%;--height:20px;--width:9;--c:purple"><span></span></span>
</div>

Problem :

EDIT:
I’m building a simple event calendar(using HTML+CSS) and am currently working on multiple day events.

I’m a beginner to HTML&CSS and have a pretty straightforward question, but i just can’t seem to find the answer: How can you make a child div overflow to the next row(of divs, etc.) if there isn’t enough space on the screen(or on the row of divs) to fit the whole child div? And could you do it with only HTML&CSS(if possible) at most a bit of JavaScript? Here’s what i mean should happen:

enter image description here

As you see, because the blue child div overflows to the second row of divs because it is to large to fit in just the first row. Currently, if my blue div is too large, it will just overflow to the side(run code below).

    html, body {
      left: 0;
      margin: 0;
      background:white;
      height:100%;
    }
    
    b{
      font-family:calibri;
      padding-left:10px;
    }
    
    #container{
      margin: 20px auto;
      width:300px;
      height: 150px;
      border: 1px;
      position:relative;
    }

    .colorone{
      background:#FFEB3B;
      width:150px;
      height: 150px;
      float:left;
    }
    .colortwo{
      width:150px;
      height: 150px;
      background:#8BC34A;
      overflow:hidden;
    }
    .colorthree{
      left: 10px;
      position: absolute;
      width: 150%;
      height: 20px;
      background:blue;
      overflow:hidden;
    }
    <html>
      <body>
      <div id="container">
         <div class="colorone">
           <b>4</b>
           <div class="colorthree"></div>
         </div>
         <div class="colortwo"><b>5</b></div>
         <div class="colortwo" style="float:left"><b>6</b></div>
         <div class="colorone"><b>7</b></div>
      </div>  
      </body>
    </html>

I’ve searched and researched online & on Stack Overflow but I still can’t seem to find the answer, and barely any questions on it, so any help would be greatly appreciated.

Comments

Comment posted by Paulie_D

It’s not possible with CSS

Comment posted by bigless

What is that blue color in your case? It would help to share your use case too to get best advice.

Comment posted by Temani Afif

@VXp everything is possible with CSS 😉

Comment posted by VXp

@TemaniAfif Not bad, to make it dynamic, JS only needs to cover –left, –width and content’s content/dots. 🙂

Comment posted by CoolUserName

Thank you for your answer, it helped me so much! But just one thing: how could you place text inside of the spanned elements? The phantom text doesn’t seem to be working.

Comment posted by Temani Afif

@CoolUserName can you show me how it’s not working?

Comment posted by Temani Afif

@CoolUserName with this solution you cannot since I only consider coloration to be used in the span elements. You can ask another quesiton if you want such thing.

By

Related Post

HTML

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

Nov 20, 2022
HTML

[ANSWERED] html – How to include a clickable image behind a link

Nov 20, 2022
HTML

[ANSWERED] html – Move list item to the left in header/navigation menu

Nov 20, 2022

Leave a Reply

Your email address will not be published. Required fields are marked *

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022