证明跨度之间的内容

Question

我正在尝试以节日阵容格式显示艺术家列表，利用 :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 样式。

Answer 1

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

希望，成功了。

Answer 2

单独使用 CSS 和给定标记完成此操作是不可能的。

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

这里有一个Flexbox/jQuery的解决方案（当然javascript也可以）。

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

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

另外，一开始需要在所有项目上设置最大的字体大小，否则会出现类似的问题，当一个从最初的变小时，突然 space 不够

Updated codepen

堆栈片段

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

证明跨度之间的内容

Justify content between spans

html

css

flexbox

justify