CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mr. Jo
Mr. Jo

Reputation: 5261

Break all lines in CSS if one breaks

I've a part of code on my website. Some time it can happen that the line breaks if the code don't fit in the parent element anymore:

enter image description here

If this happens I want to break all lines instead because it looks ugly when one part is broken and the other don't.

Remind
I can have a least 20 elements in one list.

Update
This is the part of my code which I all need to wrap if one of them wraps:

.elements-list {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  list-style: none outside;
}

.list-entry {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  list-style: none outside;
  padding-right: 8px;
  max-width: 200px;
}

span.single-detail span {
    letter-spacing: 1px;
    display: -webkit-inline-box;
    display: inline-flex;
    display: -ms-inline-flexbox;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
<ul class="elements-list">
  <li class="list-entry">
    <span class="single-detail">
      <span>Abgabefrist:</span>
      <span>22.02.2222</span>
    </span>
    <span class="single-detail">
      <span>Entlohnung:</span>
      <span>2.222,00 €</span>
    </span>
  </li>
  <li class="list-entry">
    <span class="single-detail">
      <span>Abgabefrist:</span>
      <span>22.02.2222</span>
    </span>
    <span class="single-detail">
      <span>Entlohnung:</span>
      <span>20.222,00 €</span>
    </span>
  </li>
  <li class="list-entry">
    <span class="single-detail">
      <span>Abgabefrist:</span>
      <span>22.02.2222</span>
    </span>
    <span class="single-detail">
      <span>Entlohnung:</span>
      <span>22.000.222,00 €</span>
    </span>
  </li>
</ul>

Upvotes: 0

Views: 549

Answers (3)

GolezTrol
GolezTrol

Reputation: 116110

I don't think you can solve this with CSS alone. You can solve it with JavaScript.

One way would be to constantly monitor the elements and see if one of them wrapped. But then, once wrapped you will never unwrap, it's not responsive.

So this is my alternative: By putting the value inside inline-block elements, you can align the widths of the elements. This way, when one element wraps, they will all wrap, because they simply won't fit anymore.

Advantages of this solution:

  • It's responsive, responds to browser resizing.
  • Only requires JavaScript on load. Sizing and wrapping is handled by CSS once the widths are set, so it's fairly lightweight.

Disadvantages:

  • You will need to recalculate the widths if you change the content of the elements, or if you have dynamic font sizing (I hope not).
  • It's not pixel perfect, it seems. Maybe it can be tuned (for instance by giving the left element also a width in whole pixels), or otherwise, maybe you'll forgive me this pixel. ;)

window.addEventListener('DOMContentLoaded', function(){
  var rows = document.querySelectorAll('.row');
  // First loop to find which line is the widest.
  var widest = 0;
  for(r=0; r<rows.length; r++) {
    console.log(r);
    var width = rows[r].querySelector('.col1').offsetWidth + 
                rows[r].querySelector('.col2').offsetWidth;
                
    if (width > widest) widest = width;
  }
  // second loop to set the width of col2, so they all
  // get the same width.
  for(r=0; r<rows.length; r++) {
    rows[r].querySelector('.col2').style.width = 
      (widest - rows[r].querySelector('.col1').offsetWidth) + 'px';
  }
});
/* This is needed */
.col2 {
  display: inline-block;
}

/* This is just for show */
.col1 {
  padding-right: 1em;
}

span {
  box-sizing: border-box;
  border: 1px solid grey;
}
<!-- hacky div/span table, since there is no HTML in the question -->
<div class="row"><span class="col1">The time</span><span class="col2">2018-12-22 12:34</span></div>
<div class="row"><span class="col1">Total price here</span><span class="col2">$ 5,-</span></div>

Upvotes: 1

Lawrence
Lawrence

Reputation: 29

Well, easiest would be to create "abgabefrist:01/01/0001" as two elements instead of one and then add display flex to the parent. so when the screen shrinks, the element comes below another.

Below mentioned code fine, tested on codepen.

.dates div {
  display: flex;
  flex-wrap: wrap;
}
<div class="main">
  <div class="dates">
  <div><span>abgabefrist:</span> 
  <span>01/01/0001</span></div>
  <div><span>abgabefrist:</span> 
  <span>02/02/0002</span></div>
    </div>
  <div class="btns">
    <button> Button One</button>
    <button> Button Two </button>
  </div>
</div>

Upvotes: 0

Vusumzi Belmont
Vusumzi Belmont

Reputation: 86

You either need to set the css property white-space: nowrap; on the text parent element so no text wraps for that class or you could add the <br> on the HTML after the name of the element so it breaks every time, code is needed so we can be more specific in finding a solution.

Upvotes: 0

Related Questions