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>

Answer 2

您要么需要在文本父元素上设置css property white-space: nowrap;，以使该类没有文本换行，要么可以在元素名称后的HTML上添加<br>，这样可以打破每个时间，需要代码，因此我们可以更具体地找到解决方案。

Answer 3

最简单的方法是将“ abgabefrist：01/01/0001”创建为两个元素（而不是一个），然后将display flex添加到父元素。因此，当屏幕缩小时，该元素将位于另一个元素之下。

以下提到的代码很好，在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>

如果其中一个会中断，请中断CSS中的所有行

3 个答案: