html - CSS:使文本在图像宽度处中断

Question

我有一个水平滚动的图片库，使用 this npm package .

我有相同高度和可变宽度的图像并排放置，对于其中一些我想在下面添加文本。我不希望文本变得比图像宽。最好的方法是什么？图片应保持相同的高度，所有文本都将添加到下方。

我对这个问题做了一些简化并准备了一个 jsfiddle我尝试使用 here 中的第一个解决方案.虽然不起作用。

编辑:我现在意识到我在 jsfiddle 中的错误位置有一个括号，现在它可以工作了:

.scrolling-wrapper-flexbox {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
 }  

  .card {
    flex: 0 0 auto;
    width: -moz-min-content;    /* Firefox/Gecko */
    width: -webkit-min-content; /* Firefox/Gecko */    
    width: min-content;
}

我有:

    .scrolling-wrapper-flexbox {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
    
      .card {
        flex: 0 0 auto;
        width: -moz-min-content;    /* Firefox/Gecko */
        width: -webkit-min-content; /* Firefox/Gecko */    
        width: min-content;
    }
}

我猜有些复制/粘贴错误。

如果窗口足够宽以在图片之间创建间隙，则文本将比图像宽。

Answer 1

使用这个:

.scrolling-wrapper-flexbox {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  overflow-x: auto;
  }

  .card, .item {
    flex: 0 0 auto;
      background: lightgreen;
  width: -moz-min-content;  /* Firefox/Gecko */
  width: -webkit-min-content;   /* Firefox/Gecko */    
  width: min-content;
  }