时间戳

首页 > 解决方案 > 如果一行中断，则中断 CSS 中的所有行

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

问题描述

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

在此处输入图像描述

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

提醒
我一个列表中至少可以包含 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 €&lt;/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 €&lt;/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 €&lt;/span>
    </span>
  </li>
</ul>

标签： javascriptjqueryhtmlcss

解决方案

我不认为你可以单独使用 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>

推荐阅读