对齐跨度之间的内容答案

【问题标题】：Justify content between spans对齐跨度之间的内容
【发布时间】：2018-05-24 00:23:04
【问题描述】：

我正在尝试以节日阵容格式显示艺术家列表，利用:first-line 选择器来显示阵容第一行中的艺术家比其他人更突出。

.artists {
  display: block;
  text-align: justify;
  font-size: 1rem;
}

.artists:first-line {
  font-size: 1.5rem;
}

.artists span {
  display: inline;
  margin: 0.5rem 0;
  white-space: nowrap;
}

<div class="artists">
  <span>Coldplay</span>
  <span>Nine Inch Nails</span>
  <span>Thom Yorke</span>
  <span>Solange</span>
  <span>Justice</span>
  <span>St. Vincent</span> ...
</div>

我希望艺术家列表填充容器的宽度，每个艺术家之间有间距。上述实现的问题在于，它在艺术家姓名内和艺术家姓名之间添加间距，而不是仅在艺术家姓名之间添加间距：

我可以添加一行 CSS 来解决这个问题吗？是否有display: inline-flex 和justify-content: space-between 的实现可以工作？如果我可以将display: inline-block 添加到跨度中，我也可以让它工作，但这样做会摆脱:first-line 样式。

【问题讨论】：

只有一个问题...如果有 3 行或多于 3 行会怎样？节日阵容格式可以有它，我想在这种情况下你也想在多行之间分离......我猜你最好的选择是一些 javascrpt，但是......让我们等一下，也许有人会有纯 CSS 解决方案...
是的，如果有 :second-line 和 :third-line 选择器就好了，但我可以只使用不同样式的一行（假设我可以使用 CSS )。
您必须在此处使用脚本，并添加例如第一行中的项目的类。这样也可以区分第 2 行、第 3 行等。

标签： html css flexbox justify

【解决方案1】：

使用给定的标记和 CSS 单独使用 CSS 是不可能的。

如果能够给每个项目一个宽度，媒体查询将是一个可能的解决方案，尽管需要大量的硬编码 CSS。

这是一个 Flexbox/jQuery 解决方案（当然也可以使用 javascript）。

这里棘手的部分是，当设置不同的字体时，它要么是更多或更少项目的空间，所以当你更改第 2 行的字体时，第一个项目突然适合并会再次跳回。

为了完成这项工作，我在这里使用了伪元素，以便能够在第 1/2 行和第 2/3 行之间创建 分隔符。

另外，需要从设置所有项目的最大字体开始，否则会出现类似的问题，当一个从最初的较小的更改时，突然没有足够的空间。

Updated codepen

堆栈sn-p

(function ($) {
  //  preload object array to gain performance
  var $items = $('.artists span'), 
      $cache = [];
    
  //  run at resize
  $( window ).resize(function() {
    $.fn.setItems(1);   
  });

  $.fn.setItems = function(idx) {

    // remove classes
    if ($cache && $cache.length > 0) {
      $items.removeClass(function(i, val) {
          return 'line' + $cache[i];
      });    
    }

    $cache = [];
    
    $items.each(function(i, obj) {    

      //  did top value changed
      if (i != 0 && $items.eq(i - 1).offset().top != $(obj).offset().top) {
        idx++;
      }
      
      $cache.push(idx);
    });
    
    //  set classes
    $items.addClass(function(i, val) {
        return 'line' + $cache[i];
    });    
  }
  
  //  run at load
  $.fn.setItems(1);

}(jQuery));

.artists {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 1rem;
}
.artists::before, .artists::after {
  content: ' ';
  width: 100%;
  order: 1;
}
.artists::after {
  order: 3;
}
.artists span {
  font-size: 1.5rem;
  margin: 0.5rem 0;
  white-space: nowrap;
}
.artists .line2 {
  font-size: 1.25em;
  order: 2;
}
.artists .line3,
.artists .line3 ~ span {
  font-size: 1em;
  order: 4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="artists">
  <span>Coldplay</span>
  <span>Nine Inch Nails</span>
  <span>Thom Yorke</span>
  <span>Solange</span>
  <span>Justice</span>
  <span>St. Vincent</span>
  
  <span>Coldplay 2</span>
  <span>Nine Inch Nails 2</span>
  <span>Thom Yorke 2</span>
  <span>Solange 2</span>
  <span>Justice 2</span>
  <span>St. Vincent 2</span>
</div>

【讨论】：

【解决方案2】：

.artists {
  text-align: justify;
  font-size: 1rem;
  display: flex;
  justify-content: space-between;
}

希望，它有效。

【讨论】：