时间戳

首页 > 解决方案 > CSS：使文本在图像宽度处中断

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

问题描述

我有一个水平滚动图片库，使用这个 npm 包。

我有彼此相邻的相同高度和可变宽度的图像，其中一些我想在下面添加文本。我不希望文字变得比图像更宽。最好的方法是什么？每个图像应保持相同的高度，所有文本都将添加到下方。

我已经为这个问题简化了一些事情，并准备了一个jsfiddle，我尝试从这里开始使用第一个解决方案。虽然不起作用。

编辑：我现在意识到我在 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;
    }
}

我猜是一些复制/粘贴错误。

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

标签： htmlcss

解决方案

用这个：

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

推荐阅读