html - 证明跨度之间的内容

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

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

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

这里有一个 Flexbox/jQuery 的解决方案(当然也可以使用 javascript)。

这里棘手的部分是，当设置不同的字体时，它会为更多或更少的元素留出空间，因此当改变第 2 行的字体时，第一个元素突然适合并再次跳回。

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

此外，一开始需要在所有元素上设置最大的字体大小，否则会出现类似的问题，当一个从最初的变小时，突然没有足够的空间。

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>