Html - long div with span elements won't break to multiple lines when it gets too long

LauraNMS
July 21, 2023
269 views
0 votes
2 Answers

I have a div with many span sub-elements in it. When the line is wider than the screen, it just runs off the screen, it doesn’t break to a new line. Why is that? How can I force it to behave like an ordinary div and wrap to a new line?

https://codepen.io/lschneiderman/pen/GRwGBGZ

/*  SECTIONS  */

.section {
  clear: both;
  padding: 0px;
  margin: 0px;
  width: 90%;
  margin-left: 5%;
}


/*  COLUMN SETUP  */

.col {
  display: block;
  float: left;
  margin: 1% 0 1% 1.6%;
}

.col:first-child {
  margin-left: 0;
}


/*  GROUPING  */

.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  zoom: 1;
  /* For IE 6/7 */
}


/*  GRID OF FOUR  */

.span_4_of_4 {
  width: 100%;
}

.span_3_of_4 {
  width: 71.6%;
}

.span_2_of_4 {
  width: 45.2%;
  font-family: 'Roboto', sans-serif;
}

h3 {
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
}

.span_1_of_4 {
  width: 25.8%;
  position: relative;
  height: 100vh;
}


/*  GO FULL WIDTH BELOW 480 PIXELS */

@media only screen and (max-width: 1000px) {
  .col {
    margin: 1% 0 1% 0%;
  }
  .span_1_of_4,
  .span_2_of_4,
  .span_3_of_4,
  .span_4_of_4 {
    width: 100%;
  }
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
  .col {
    margin: 1% 0 1% 0%;
  }
}

.positions,
.positions-myroster {
  font-size: .9rem;
  font-family: 'proxima-nova';
}

.positions {
  width: 100px;
  border: 1px solid green;
  height: auto;
  position: relative;
}

@media only screen and (max-width: 800px) {
  .positions,
  .positions-myroster {
    font-size: 1rem;
  }
}

.positions span,
.positions-myroster span {
  margin-left: 10px;
  cursor: pointer;
}

<div class="section group">
  <div class="col span_3_of_4">
    <div class="positions">
      <span class="ALL">ALL</span><span class="QB">QB</span><span class="RB">RB</span><span class="WR">WR</span><span class="TE">TE</span><span class="OL">OL</span><span class="DL">DL</span><span class="LB">LB</span><span class="CB">CB</span><span class="S">S</span>
      <span
        class="Special">Special</span>
    </div>
  </div>
  <div class="col span_1_of_4">
  </div>
</div>

Tags: css html

Answers

It does not break, because there is no white space character anywhere between them.

What you can do:

Add spaces after each </span>
Write each span in new line. HTML ignores new lines rn and treats them as white space characters
Add 0-width white space after each span &#8203

/*  SECTIONS  */
.section {
    clear: both;
    padding: 0px;
    margin: 0px;
    width: 90%;
    margin-left: 5%;

}

/*  COLUMN SETUP  */
.col {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }


/*  GRID OF FOUR  */
.span_4_of_4 {
    width: 100%;
}
.span_3_of_4 {
    width: 71.6%;
}
.span_2_of_4 {
    width: 45.2%;
    font-family: 'Roboto', sans-serif;
}

    h3 {
        font-size: 1.1rem;
        font-weight: 800;
        text-transform: uppercase;
    }

.span_1_of_4 {
    width: 25.8%;
    position: relative;
    height: 100vh;
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 1000px) {
    .col {  margin: 1% 0 1% 0%; }
    .span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }

}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .col { 
        margin: 1% 0 1% 0%;
    }
}

.positions, .positions-myroster {
    font-size: .9rem;
    font-family: 'proxima-nova';
}

.positions {
    width: 100px ; border: 1px solid green; height: auto;
  position: relative;
}

@media only screen and (max-width: 800px) {
    .positions, .positions-myroster {
        font-size: 1rem;
    }
}
.positions span, .positions-myroster span {
    margin-left: 10px; cursor: pointer;
}

    <div class="section group">
            <div class="col span_3_of_4">
                <div class="positions">
                    <span class="ALL">ALL</span>&#8203<span class="QB">QB</span>&#8203<span class="RB">RB</span>&#8203<span class="WR">WR</span>&#8203<span class="TE">TE</span>&#8203<span class="OL">OL</span>&#8203<span class="DL">DL</span>&#8203<span class="LB">LB</span>&#8203<span class="CB">CB</span>&#8203<span class="S">S</span>&#8203<span class="Special">Special</span>
                </div>
            </div>
            
            <div class="col span_1_of_4">
                
            </div>
    </div>

Add display:flex and flex-wrap:wrap; to positions div

.section {
  clear: both;
  padding: 0px;
  margin: 0px;
  width: 90%;
  margin-left: 5%;
}


/*  COLUMN SETUP  */

.col {
  display: block;
  float: left;
  margin: 1% 0 1% 1.6%;
}

.col:first-child {
  margin-left: 0;
}


/*  GROUPING  */

.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  zoom: 1;
  /* For IE 6/7 */
}


/*  GRID OF FOUR  */

.span_4_of_4 {
  width: 100%;
}

.span_3_of_4 {
  width: 71.6%;
}

.span_2_of_4 {
  width: 45.2%;
  font-family: 'Roboto', sans-serif;
}

h3 {
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
}

.span_1_of_4 {
  width: 25.8%;
  position: relative;
  height: 100vh;
}


/*  GO FULL WIDTH BELOW 480 PIXELS */

@media only screen and (max-width: 1000px) {
  .col {
    margin: 1% 0 1% 0%;
  }
  .span_1_of_4,
  .span_2_of_4,
  .span_3_of_4,
  .span_4_of_4 {
    width: 100%;
  }
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
  .col {
    margin: 1% 0 1% 0%;
  }
}

.positions,
.positions-myroster {
  font-size: .9rem;
  font-family: 'proxima-nova';
}

.positions {
  width: 100px;
  border: 1px solid green;
  height: auto;
  position: relative;
  display:flex;
  flex-wrap:wrap;
}

@media only screen and (max-width: 800px) {
  .positions,
  .positions-myroster {
    font-size: 1rem;
  }
}

.positions span,
.positions-myroster span {
  margin-left: 10px;
  cursor: pointer;
}

<div class="section group">
  <div class="col span_3_of_4">
    <div class="positions">
      <span class="ALL">ALL</span><span class="QB">QB</span><span class="RB">RB</span><span class="WR">WR</span><span class="TE">TE</span><span class="OL">OL</span><span class="DL">DL</span><span class="LB">LB</span><span class="CB">CB</span><span class="S">S</span>
      <span
        class="Special">Special</span>
    </div>
  </div>
  <div class="col span_1_of_4">
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – long div with span elements won't break to multiple lines when it gets too long

Answers