Question

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

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

Answer 1

要使用CSS单独使用给定的标记来实现这一点，并且CSS是不可能的。

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

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

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

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

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

Updated codepen

Stack snippet

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

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

希望，它有效。

证明跨度之间的内容

2 个答案: