javascript - 如果一个中断，则中断 CSS 中的所有行

Question

我的网站上有一部分代码。有时，如果代码不再适合父元素，则可能会发生换行:

如果发生这种情况，我想改为断开所有行，因为当一个部分断开而另一部分没有断开时，它看起来很难看。

提醒
我可以在一个列表中包含至少 20 个元素。

更新
这是我的代码的一部分，如果其中一个包装，我都需要包装:

.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>

Answer 1

我认为单靠 CSS 无法解决这个问题。您可以使用 JavaScript 解决它。

一种方法是持续监控元素并查看其中一个元素是否被包裹。但是，一旦包装好，您将永远无法打开，它没有响应。

所以这是我的选择: 通过将值放在 inline-block 元素中，您可以对齐元素的宽度。这样，当一个元素环绕时，它们将全部环绕，因为它们不再适合了。

该方案的优点:

• 响应迅速，响应浏览器大小调整。
• 只需要加载 JavaScript。设置宽度后，大小和包装由 CSS 处理，因此它相当轻量级。

缺点:

• 如果您更改元素的内容，或者如果您有动态字体大小(我希望不会)，您将需要重新计算宽度。
• 它似乎不是像素完美的。也许可以对其进行调整(例如，通过为左侧元素也提供以整像素为单​​位的宽度)，否则，也许您会原谅我这个像素。 ;)

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>